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内 容 所 要 


本 书 从 前 端 开发 人 员 的 需求 出 及 ， 以 “ 演 ” 为 线索 ， 从 结构 、 内 容 到 
美化 装饰 等 方面 ， 全 面 且 深入 地 讲解 前 器 开发 人 员 必 须 了 解 和 掌握 的 大 
量 的 CSS 知 识 点 。 同 时 ， 作 者 结合 多 年 的 从 业经 验 ， 通 过 大 量 的 实战 案 
例 ， 详 尽 解析 CSS 的 相关 知识 与 常见 问题 。 作 者 还 为 本 书 开 及 了 专门 的 
配套 网 站 ， 进 行 实例 展 示 、 问 题 答疑 。 








作为 一 本 CSS 深 度 学 习 的 书 ， 书 中 介绍 大 量 许多 前 端 开发 人 员 都 不 
知道 的 CSS 知 识 点 。 本 书 语言 通俗 易 懂 ， 内 容 深 入 浅 出 ， 并 结合 实战 经 
验 ， 更 适合 对 CSS 有 所 了 解 的 前 端 开 发 人 员 阅读 。 通 过 阅读 本 书 ， 读 者 
会 对 CSS 世 界 的 深度 和 广度 有 一 个 全 新 的 认识 。 
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我 是 一 个 利他 主义 非常 明显 的 人 ， 这 多 半 与 小 时 候 都 是 在 他 人 的 大 
助 下 成 长 有 关 ， 和 帮助 我 的 有 亲戚 、 邻 大 、 老 师 ， 以 及 很 多 不 认识 的 人 。 
所 以 ， 现 在 的 目 己 总 是 很 乐意 帮助 他 人 成 长 。 











我 从 2007 年 恋 大 三 的 时 候 开 始 接触 并 使 用 CSS， 到 现在 已 经 整整 10 
年 了 ， 在 这 10 年 时 间 里 ， 我 从 未 间断 过 对 CSS 的 研究 和 学 习 。 现 在 想 
想 ， 能 够 坚持 下 来 还 真是 不 容易 ， 其 核心 动力 其 实 就 是 上 面 的 “帮助 他 
人 威 陨 目 我 ”% 











开始 的 时 候 ， 我 和 大 多 数 人 一 样 ， 因 为 CSS 简 单 ， 一 开始 成 长 很 
快 ， 页 面 写 多 了 之 后 还 能 够 总 结 出 一 些 准 则 之 类 的 东西 ， 并 目 我 感觉 民 
好 ， 或 许 是 目 己 运气 好 ， 误 打 误 撞 走 出 了 庐山 幻境 ， 突 破 了 学 习 CSS 的 
一 个 又 一 个 上 瓶颈 。 但 是 ， 在 与 诸多 同行 的 邮件 交流 中 我 发 现 ， 很 多 CSS 
开发 人 员 感 到 迷茫 ， 职 位 得 不 到 重视 ， 技 术 也 无 法 提高 ， 我 感觉 邮件 的 
交流 一 次 最 多 只 能 帮助 一 个 人 ， 效 率 实在 太 低 。 








人 在 做 抉择 的 时 候 是 需要 有 一 些 指引 的 。 实 际 上 ， 很 多 年 前 ， 我 自 
己 曾 犹 驳 过 ， 是 否 要 继续 深入 学 习 CSS， 探 索 每 一 个 边界 ， 因 为 对 于 个 
人 而 言 ， 这 会 是 一 件 吃力 不 讨好 的 事情 ， 对 于 CSS 这 门 语言 ，3 年 学 习 
80 分 和 10 年 学 习 90 分 对 于 产品 价值 的 区 别 其 实 有 限 。 但 那 一 封 封 交流 邮 


件 坚定 了 自己 的 方向 ， 艰 苦 的 路 让 我 一 个 人 走 就 好 了 ， 等 我 踏 遍 整 个 
CSS 世 界 ， 再 把 完整 的 地 图 绘制 出 来 ， 岂 不 就 能 帮助 更 多 人 了 ? 


所 以 ， 随 着 上 自己 的 不 断 前 行 ， 身 边 的 人 越 来 越 少 ， 少 到 好 像 就 我 一 
个 人 ， 无 比 抓 我 的 时 候 ， 让 我 坚持 下 来 的 就 是 “日 后 可 以 帮助 更 多 人 ， 
是 很 有 价值 的 ”的 信念。 


10 年 过 去 了 ，10 年 的 努力 和 付出 终于 开始 开花 结果 ， 而 其 中 一 个 果 
实 就 是 《CSS 世 界 》 这 本 书 。 


10 年 风雨 积累 ， 踏 明 CSS 世 界 的 干 山 万 水 ， 哪 里 有 美景 ， 哪 里 有 秘 
境 ， 哪 里 是 陷阱 ， 哪 里 是 路 径 ， 我 全 了 然 于 心 。 我 这 样 做 为 的 就 是 给 予 
清晰 明确 的 指引 ， 拓 展 对 CSS 世 界 的 认 知 ， 挖 掘 CSS 的 潜力 ， 帮 助 他 人 
突破 一 个 又 一 个 CSS 学 习 的 瓶颈 。 


为 何 需要 这 本 CSS 进 阶 书 


大 家 应 该 都 注意 到 了 ， 最 近 行 业 非 常 缺 前 端 开 发 人 员 ， 前 端 开发 人 
员 培 训 机 构 也 如 雨后春笋 般 大 量 涌现 。 拨 开眼 前 的 面纱 ， 定 睛 一 看 ， 会 
发 现 ， 缺 的 其 实 不 是 前 器， 而 是 优秀 的 、 有 资历 的 、 技 术 有 深度 的 前 端 
开发 人 员 。 








通过 和 一 些 前 端 同行 、 某 些 人 力 资 源 接触 和 我 收 到 的 诸多 简历 我 用 
现 ， 目 前 的 现状 是 这 样 的 ; 行业 里 有 很 大 一 拨 儿 人 ， 也 自称 为 前 端 开发 
人 员 ， 但 他 们 仪 仅 是 可 以 根据 设计 稿 写 出 页 面 这 种 水 平 。 换 句 话说 ， 就 
是 会 HTML 和 CSS 以 及 一 点 儿 JavaScript。 环 顾 四 周 ， 这 种 程度 的 人 实在 
是 太 多 了 ， 完 全 没有 任何 技术 上 的 优势 。 虽 然 这 些 也 是 前 端 开发 人 员 ， 
但 是 公司 要 抢 的 前 端 开发 人 员 并 不 是 这 类 人 。 





为 什么 会 这 样 呢 ? 





因为 CSS 这 门 语言 入 门 实在 是 太 简 单 了 ， 比 如 说 我 夫人 ， 完 全 不 懂 
代码 ， 我 手把手 教 她 1 个 星期 ， 写 出 一 个 长 得 像 某 某 网 首页 的 页 面 绝对 
是 没 问 题 的 ， 因 为 CSS 常 用 属性 就 那么 多 ， 且 鲜 有 逻辑 ， 无 须 算 法 ， 熟 
记 各 个 属性 值 对 应 的 特性 就 能 上 手 了 。 上 所 以 ， 很 多 没有 编程 基础 的 人 ， 
就 通过 HTML 和 CSS 进 入 了 这 个 圈子 。 但 当 他 们 发 现 自己 可 以 很 愉快 地 
实现 页 面 的 时 候 ， 就 会 觉得 CSS 也 就 这 样 ， 导 致 困 于 庐山 ， 止 步 不 前 ， 
就 算 日 后 听 到 或 见 到 CSS 深入 很 难 ” 的 言论 并 打算 着 手 精进 ， 也 不 知道 
接 下 来 该 怎么 走 、 如 何 突破 现 有 的 瓶颈 ， 于 是 就 产生 了 迷茫 。 




















这 类 高 不 成 低 不 就 的 前 端 人 员 和 急需 本 书 深入 "CSS 世界， 突破 瓶 


贷 ， 告 别 迷 范 。 


在 这 个 世界 上 ， 越 是 看 似 简 单 的 东西 反而 越 是 难以 深入 ， 就 好 比 为 
何 1+1 等 于 2? CSS 这 门 语言 也 是 如 此 。 很 多 自 认为 学 了 CSS 有 八 九 成 的 
人 人， 实际 上 仅仅 是 熟 记 CSS 手 册 中 的 各 种 属性 ， 或 者 理解 一 些 CSS 概 
念 ， 再 进一步 ， 其 至 对 某 一 两 个 CSS 属 性 有 过 深入 的 分 析 。 但 是 ， 这 些 
人 依然 无 法 理解 很 多 页 面 上 看 似 简 单 的 现象 (我 想 更 多 的 是 根本 就 没 在 
意 这 些 现象 ) ， 也 无 法 基于 现 有 的 规则 创造 一 些 完 全 创新 的 CSS 实 现 ， 
仅仅 停留 在 熟练 地 使 用 这 种 程度 。 





为 什么 会 这 样 呢 ? 那 是 因为 CSS 是 一 门 有 别 于 传统 程序 语言 的 语 
言 。 绝 大 多 数 编程 语言 ， 比 方 说 JavaScript， 各 种 字符 串 、 数 组 、 方 法 ， 
记 住 一 个 就 是 一 个 ， 使 用 的 时 候 ，forEach( ) 就 是 循环 ，replace() 就 
是 蔡 换 ， 不 要 担心 执行 replace() 的 时 候 字 符 哩 突然 增加 了 ! 很 多 人 就 
是 用 这 种 思路 学 习 CSS 的 ， 导 致 很 快 就 遇 到 了 天 花 板 。 为 什么 呢 ? 这 是 
因为 ， 在 CSS 的 世界 里 ， 页 面 上 的 任何 看 似 简单 的 呈现 都 是 由 许 许 多 多 
CSS 属 性 共同 作用 的 结果 。 例 如 ， 对 于 一 个 图 片 浮动 ， 单 纯 认为 内 
有 float 在 工作 是 不 全 面 的 ， 实 际 上 ， 行 高 、 字 体 、 鼠 标 手 形 等 都 在 暗 
地 里 “搞鬼 >”， 此 时 如 有 果 仅 仅 套用 一 两 个 CSS 属 性 值 应 有 的 表现 来 理解 ， 
是 根本 理解 不 了 的 。 换 句 话 说， 有些 人 的 CSS 水 平 之 所 以 停滞 不 前 ， 是 
因为 他 们 没有 把 所 有 的 CSS 当 作 一 个 整体 ， 放 在 一 个 完整 的 世界 中 去 看 
待 。 所 以 ， 没 有 比 “ 学 CSS 看 看 CSS 中 文 手 册 就 够 了 ”更 思春 的 言论 了 ， 
手册 仅仅 是 表层 的 、 独 立 的 一 些 特性 ， 每 个 CSS 属 性 在 CSS 世 界 中 都 是 
有 其 存在 的 原因 的 ， 都 是 和 其 他 多 个 CSS 属 性 发 生 着 干 丝 万 缕 的 关系 
的 ， 这 背后 的 种 种 远 比 他 们 想象 得 要 庞大 很 多 。 


























而 本 书 完 完全 全 区 别 于 传统 教条 式 的 手册 或 参考 书 或 教程 之 类 ， 一 
步 一 步 带 领 读者 接触 真正 丰富 多 彩 、 妙 趣 横生 的 CSS 世 界 ， 一 番 畅 快 自 
在 的 CSS 世 界 之 旅 下 来 ， 读 者 一 定 会 得 到 不 一 样 的 “洗礼 ”， 困 扰 多 年 的 
CSS 成 长 瓶 希 说 不 定 就 会 不 知 不 党 地 突破 了 了。 





如 何 正 确认 识 本 书 


首先 ， 大 家 务必 明确 这 一 点 ， 那 就 是 本 书 的 所 有 内 容 都 是 我 个 人 的 
理解 。 没 错 ， 是 人 的 理解 ， 不 是 干巴 巴 的 文档 。 这 些 理解 是 我 自己 多 年 
持之以恒 对 CSS 研 究 和 思考 后 ， 经 过 个 人 情感 润 饰 和 认 知 提炼 加 工 的 产 
物 ， 完 全 是 我 自己 所 理解 和 认识 的 CSS 世 界 ， 可 能 是 不 具有 权威 性 的 。 
写 这 本 书 主要 是 希望 通过 分 享 自己 的 心得 给 对 CSS 感 兴趣 的 各 个 领域 的 
人 以 局 迪 ， 引 发 其 思考 ， 或 者 使 其 有 不 一 样 的 感悟 。 











从 为 一 方面 讲 ， 本 书 正 是 因为 其 内 容 部 是 经 过 人 这 个 个 体 的 加 工 ， 
并 融入 了 情感 化 的 思维 ， 才 能 做 到 有 的 放 天 、 通 俗 易 懂 。 我 们 大 多 数 人 
都 是 感性 的 ， 看 伤感 电影 会 吴 ， 看 综艺 节目 会 灾 。 上 所以， 与 干巴 巴 的 教 
条 式 的 技术 书籍 相 比 ， 本 书 的 表达 方式 和 语言 风格 更 能 给 人 以 心灵 的 局 
迪 。 读 完 之 后 ， 读 者 可 能 会 有 这 样 的 想法 : 要 是 所 有 的 技术 书 都 这 么 写 
束 好 了 。 








另外 ， 本 书 不 是 技术 文档 ， 也 不 是 参考 手册 ， 因 此 知识 点 不 会 面 面 
俱 到 ， 也 残 是 说 ， 不 少 CSS 相 关 的 内 容 我 会 忽略 ， 例 如 ， 选 择 堪 这 一 部 
分 最 多 提 一 下 。 同 时 ， 为 了 保证 书 的 内 容 足 够 简练 ， 简 单 的 CSS 语 法 和 
常规 的 使 用 在 本 书 中 基本 上 不 会 提 及 ， 只 会 重点 分 析 在 其 他 地 方 看 不 到 
的 内 容 。 


配套 网 站 


我 专门 为 本 书 制作 了 一 个 网 站 (http:/www.cssworld.cn) ， 在 这 个 
配套 网 站 读者 可 以 了 解 更 多 关于 本 书 或 者 我 个 人 的 一 些 信息 。 





最 后 ， 由 于 很 多 内 容 都 是 个 人 理解 ， 难 免 会 有 不 准确 或 者 让 大 家 产 
生 怀 疑 的 地 方 ， 欢 迎 去 官方 论坛 http://bbs.cssworld.cn/ 对 应 版 块 进行 提问 
或 反馈 。 
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要 深入 理解 一 个 事物 之 前 ， 最 好 先 对 其 整体 有 个 大 概 了 解 ， 这 样 才 
不 至 于 蕊 测 管 观 。 如 果 把 CSS 比 作 一 座 大 山 ， 则 我 们 对 整体 的 认 知 束 好 
比 知道 这 座 山 的 位 置 、 山 势 、 道 路 状况 每， 这样， 当 我 们 深入 其 中 的 时 
候 ， 束 不 容易 迷路 ， 不 会 做 出 错误 的 决策 。 


例如 ， 对 CSS 这 门 语言 特性 的 描述 束 有 助 于 对 CSS 的 整体 认 知 。 具 
体 表 现 为 : 擅长 C++ 或 者 Java 之 类 的 程序 员 学 习 CSS 往 往 没 有 如 鱼 得 水 
的 感觉 ， 其 背后 的 原因 是 ， 典 型 的 计算 机 开发 语言 看 重 逻 辑 思维 和 抽象 
能 力 ， 但 是 CSS 这 门 语言 本 身 并 无 逻辑 可 言 ， 看 重 的 是 特性 间 的 相互 联 
系 和 具象 能 


具象 往往 以 情感 为 纽带 ， 无 意识 不 自觉 产生 ， 是 非常 感性 的 一 种 能 
力 ， 这 往往 是 偏 理 性 的 程序 员 所 不 擅长 的 。 在 某 些 程序 员 眼 中 ，CSS 属 
性 就 是 干巴 巴 的 属性 ， 无 法 建立 类 似 “ 人 与 人 关系 ”这 种 很 情感 化 的 联 
系 ， 于 是 学 习 CSS 总 是 只 得 其 形 、 不 得 其 髓 。 





当然 ， 认 知 可 以 从 多 个 角度 进行 。 例 如 ， 接 下 来 要 介绍 的 CSS“ 世 
界 观 ”以 及 CSS 的 历史 故事 ， 可 以 让 我 们 多 种 角度 同时 进行 认 知 ， 对 CSS 
这 门 语言 的 理解 更 为 准确 和 丰满 。 


1.1 CSS 世界 的 “世界 观 ” 


对 于 CSS 这 门 语言 ， 我 学 习 和 研究 已 经 有 10 年 之 久 ， 在 点 点 滴 滴 的 
积累 中 ， 逐 渐 形成 了 一 套 完整 的 体系 。 在 CSS 这 个 世界 中 ，CSS 并 不 是 
一 个 机 械 枯燥 的 语言 ， 所 有 属性 都 是 有 血 有 肉 、 有 着 不 同 个 性 和 身世 的 
个 体 。 不 同 的 个 体 可 以 碰撞 出 不 同 的 火花 ， 激 荡 出 异彩 纷呈 的 故事 。 














E， 我 们 不 妨 “ 脑 洞 大 开 ” 一 下 : 如 果 把 CSS 世 界 拍 成 动漫 的 话 ， 会 是 


























这 是 
什么 样子 ? 
首先 ， 动 漫 名 可 以 叫 作 《 建 筑 神 域 》， 讲 述 一 群 建筑 魔法 师 为 国家 存亡 














得 三 


惊心动魄 战斗 的 故事 。 然后， 出现 了 “Chrome 王 国 "的 几 位 建筑 魔法 师 日 常 训 
练 的 画面 。 只 见 名 为 width 的 魔法 师 手 持 名 叫 选择 器 的 法 器 ， 准 确 指向 称 为 
<div> 的 最 普通 的 块 状 建筑 魔法 石 ， 口 中 念 道 ，“ 层 车 天 星 ， 幻 化 有 形 ， 
50%， 变 ! ”只 听见 一 声 清脆 的 “ 啦 "，<div> 魔 法 石 宽度 变 成 了 原来 的 一 半 。 
然而 ，width 却 锁 眉 摇头 ， 口 中 哺 哺 念 道 ， 所 毫秒， 还 不 够 快 ， 还 要 再 练 ， 
不 然 在 和 ‘IE 王国 "的 战斗 中 很 难 占 得 先 机 ! ”( 如 图 1-1 所 示 ) 。 


层 埃 天 星 ， 幻化 有 形 ，50% , 变 ! 


<div> 魔 法 石 
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<div> 魔 法 石 


图 1-1 CSS 世界 观 示 意 1 


此 时 ，width 突 然 发 现 前 面 1 米 之 处 有 一 块 <span> 之 石 ， 具 
有 class="test" 的 特殊 标记 ， 立 即 拿 出 法 器 ， 念 道 :“ 类 名 之 石 ，test 为 
名 ， 为 我 选择 ， 出 ! ”话音 刚 落 ，<span> 之 石 蓝 色 荧光 一 办， 明 眼 人 都 能 
出 来 ，width 魔 法 师 和 <span> 魔 法 石 现在 处 于 契约 状态 。width 继 续 念 
道 :“ 层 闭 天 星 ， 幻 化 有 形 ，50%， 变 ! ”但 <span> 魔 法 石 却 没 有 任何 变化 ， 
此 时 width 一 拍 自己 的 脑门 ， 似 乎 明白 了 什么 ， 转 过 头 对 旁边 的 display 魔 
法 师 大 声 叫 道 :“ 小 D， 这 边 这 边 ， 过 来 帮 个 忙 ..….... 来 呀 ， 快 点 .…....” 
























































只 见 display 迅 速 结束 自己 的 练习 ， 屁 颠 屁 颠 跑 过 来 ，“ 咱 跨 ? ” 
“此 为 内 联 之 石 ， 我 无 法 驾驶 ， 你 帮 我 重 塑 一 下 。” 


“小 问题 ! 正好 ， 魔 法 师 技 能 委员 会 刚 通过 了 我 的 一 个 新 法 术 ， 我 给 你 


秀一 秀 ?” 





“ 哟 ， 不 错 啊 ， 快 让 我 酌 酌 ! ” 





“好 嘲 ! ”只 见 display 拿 出 自己 的 法 器 ， 念 道 : “类 名 之 石 ，test 为 
名 ， 为 我 选择 ， 出 ! ” 紧 接 着 ， “ 层 才 天星， 幻化 有 形 ， flex, 变 ! 2 

















只 昕 见 一 声 清脆 的 “ 鄙 *?"， 在 两 人 的 合作 之 下 ，<span> 麻 法 石 宽度 也 变化 
了 (如 图 1-2 所 示 )。 


让 和 i 
过 SN 


图 1-2 _ CSS 世界观 示意 2 








“ 哟 ， 很 酷 嘛 ! ”width 对 display 坚 着 大 拇指 称赞 道 。 


























只 见 display 须 用 一 笑 ， 小 手 在 面前 轻 轻 一 挥 : “就 算 你 这 么 压 我 ， 人 























家 也 不 会 开心 的 啦 .……….” 





从 上 面 的 描述 可 以 看 出 ， 在 CSS 世 界 中 ，HIML 是 魔法 石 ， 选 择 器 
就 是 选择 法 器 ，CSS 属 性 就 是 魔法 师 ，CSS 各 种 属性 值 就 是 魔法 师 的 魔 
法 技能 ， 浏 览 器 就 是 他 们 所 在 的 “王国 ”, “王国 ” 会 不 断 更 新 法 律 法 规 
(版 本 升级 ) ， 决 定 是 否 允 许 使 用 新 的 魔法 石 CHIML5 新 标签 新 属 
性 ) ， 是 否 人 允许 新 的 魔法 师 入 “国籍 ”(CSS3 新 属性 ) ， 或 者 允许 魔法 师 
使 用 某 些 新 技能 “CSS 新 的 属性 值 )， 以 及 是 否 舍 弃 菜 些 魔法 技能 (如 
display:run-in) ; 操作 系统 就 是 他 们 所 在 的 世界 ， 不 同 的 操作 系统 








代表 不 同 的 平行 世界 ， 所 以 ，CSS 世 界 有 这 么 几 个 比较 大 的 平行 世界 ， 

即 Windows 世 界 、OS X 志 界 以 及 移动 端的 OS 世界 和 Android 世 界 。 不 同 
世界 的 浏览 器 王国 的 命运 不 一 样 ， 例 如 ， 在 OS X 世 界 中 ， 正 王国 是 不 存 
在 的 ， 而 Safari 王 国 却 异 常 强 大， 但 在 Windows 世 界 中 ，Safari 王 国 却 异 


A Hh A 


吊 洛 喘 。 
以 上 这 一 切 就 构成 了 完整 的 CSS 世 界 的 “世界 观 ”。 
下 面 回答 一 个 很 重要 的 问题 : 为 何 要 这 样 认识 CSS 世 界 呢 ? 


首先 ， 将 抽象 的 CSS 直 接 和 具体 的 现实 世界 相对 应 ， 更 加 易于 理 
解 。 试 想 一 下 ， 对 于 普通 人 ， 理 解 魔法 师 和 魔法 石 是 不 是 要 比 理解 CSS 
代码 容易 得 多 ? 其次， 以 完整 的 体系 来 学 习 CSS 要 比 单纯 关注 属性 值 理 
解 得 更 加 深刻 ， 可 以 塔 养 从 宏观 层面 认识 与 理解 CSS 的 习惯 。 再 次 ， 这 
也 方便 我 们 记忆 ， 枯 燥 的 代码 总 是 过 目 就 筷 ， 鲜 活 的 角色 总 是 印象 深 
刻 。 最 后 ， 这 样 也 可 以 让 本 书 散发 出 与 众 不 同 的 气质 。 














1.2 ”世界 都 是 创造 出 来 的 


世界 都 是 创造 出 来 的 。 很 自然 ，CSS 世 界 也 是 一 点 一 点 创造 出 来 
的 。 这 世间 上 的 事情 只 要 发 生 了 ， 都 是 有 原因 的 。CSS 志 界 的 出 现 也 不 
例外 。 


下 面 我 们 就 来 看 一 人 CSS 世界 出 现 的 历史 。 虽 然 我 知道 ， 有 些 人 对 
这 些 历 史 可 能 不 感 兴趣 ， 但 是 要 想 深 入 理解 CSS 属 性 的 一 些 设计 原因 、 
表现 原理 还 真 离 不 开 当 时 的 历史 环境 。 


大 家 可 能 都 听 说 过 马云 1995 年 去 美国 ， 第 一 次 接触 了 互联 网 ， 在 这 
个 时 间 点 ，HTML 才 是 第 一 版 且 诞 生 没 几 年 ，W3C 才 刚刚 成 立 ，CSS 还 
没 出 现 。 那 时 候 的 互联 网 几乎 都 是 文字 信息 ， 显 示 一 张 图 片 都 是 要 上 天 
的 感觉 。 











大 家 可 能 没 意 识 到 ， 那 个 时 候 前 端的 发 展 和 现在 一 样 快 ， 设 计 师 要 
求 越 来 越 多 ，HTML 也 越 来 越 庞杂 。 急 需要 其 他 专门 负责 样式 的 语言 ， 
据说 当时 有 几 个 样式 表 语 言 ， 最 后 是 CSS 胜 出 了 ， 为 什么 呢 ? 它 的 胜出 


靠 的 是 “ 层 合 "特性 。 














CSS 全 称 是 Cascading Style Sheets， 翻 译 成 中 文 就 是 “ 层 屋 样 式 表 ”。 
所 谓 “ 层 登 "， 顾 名 思 义 ， 就 是 样式 可 以 层 层 累加 ， 比 方 说 页 面 元 素 都 继 
承 了 12 像 素 的 大 小 ， 某 标题 就 可 以 设置 成 14 像 素 进 行 琶 加 。 人 发 现 没 ? 这 
种 层 登 策略 对 于 样式 的 显示 是 相当 的 灵活 。 








于 是 ， 从 1996 年 12 月 17 日 CSS1 诞 生 后 ，CSS 在 样式 呈现 领域 可 谓 所 


向 披 靡 ， 没 有 过 到 任何 竞争 对 手 。1998 年 5 月 12 日 CSS2 发 布 ， 推 行内 容 
和 表现 分 离 ， 表 格 (table) 布局 开始 落寞 。 


1998 年 腾讯 、 新 浪 和 网 易 成 立 ， 当 时 搜狐 则 成 立 1 年 不 到 。 那 个 时 
候 是 门户 的 时 代 ， 人 们 更 关注 的 是 信息 的 获取 ， 所 以 网 站 的 功能 主要 就 
是 信息 展示 ， 信 息 是 什么 ?在 那个 时 代 ， 在 互联 网 领域 ,信息 就 是 图 片 
和 文字 。 换 句 话说 ， 那 时 候 的 网 站 前 端 技 术 关 心 的 是 图 片 和 文字 的 呈 
现 ， 而 CSS2〈 包 括 9 年 之 后 ， 也 就 是 2007 年 才 出 现 的 CSS2.1) 都 是 为 图 
文 展 示 服 务 的 。 














我 再 重复 一 这 : CSS 世 界 的 诞生 就 是 为 图 文 信息 展示 服务 的 。 这 人 句 
话 在 本 书 中 会 非常 频 莹 地 出 现 ， 知 道 这 一 点 你 就 会 明白 很 多 事情 。 





好 ， 下 面 让 我 们 回 到 本 节 开 类 的 那 句 话 一 一 “世界 都 是 创造 出 来 
的 ”! 为 何 我 要 反复 强调 这 句 话 呢 ? 如果 站 在 造物 主 的 角度 去 思考 CSS 
世界 的 种 种 表现 ， 很 多 问题 残 会 迎 为 而 解 。 





现在 给 你 机 会 当 一 回 造物 主 ， 让 你 自己 重新 构建 一 个 CSS 世 界 ， 唯 
一 的 要 求 束 是 ， 这 个 世界 要 非常 便于 图 片 和 文字 的 呈现 ， 你 会 去 如 何 构 
建 呢 ? 


> 
WI 


1.3 CSS 完胜 SVG 的 武器 





在 2003 年 1 月 ，SVG 1.1 被 确立 为 W3C 标 准 。 你 没 看 错 ， 是 2003 年 。 
要 知道 ，CSS 2.1 是 2007 年 才 发 布 的 。 考 虑 到 SVG 开始 火 起 来 是 最 近 几 
年 ， 也 就 是 差不多 10 年 的 时 间 ，SVG 都 默默 无 闻 ， 鲜 有 人 问津 ， 到 底 是 
怎么 回 事 呢 ? 





很 多 人 认为 SVG 的 竞争 对 手 是 Flash。 对 ， 是 竞争 对 手 。 但 是 ， 现 在 
看 来 ，SVG 显 然 要 比 Flash 优 秀 很 多 ，SVG 开 放 、 标 准 ， 和 CSS 和 
JavaScript 都 能 很 方便 地 进行 交互 ， 如 果 单 纯 SVG 和 Flash 比 ， 难 说 谁 胜 
谁 负 。 在 我 看 来 ， 造 成 SVG 被 冷落 10 年 的 原因 不 是 别 的 ， 正 是 看 似 毫 不 
相关 的 CSS，SVG 是 被 CSS 给 打败 的 。 


正如 上 面 提 到 的 ， 在 很 长 一 段 时 间 里 ， 网 站 的 主要 功能 都 是 图 片 和 
文字 信息 的 展示 ， 但 是 ，SVG 的 强项 是 图 形 ， 其 文字 内 容 的 呈现 实在 不 
敢 茶 维 。 举 个 例子 ， 在 CSS 中 写 上 一 段 文字 ， 这 上 段 文字 会 自然 换行 、 多 
行 显示 ， 于 是 ， 可 以 像 书 本 一 样 阅读 ， 但是， 在 SVG 中 ， 文 字 要 自动 折 
行 ， 感觉 有 点 儿 赶 蚊子 上 染 一 一 强人 所 难 。 人 家 一 看 ，SVG 连 基本 的 文 
字 排 版 都 做 不 好 ， 要 SVG 何 用 ? 于 是 ，SVG 被 “ 打 入 冷 宫 ”，CS5S 一 如 既 
往 被 重用 。 

















但 是 ， 如 今 技术 得 到 了 发 展 ，Web 呈 现 更 加 复杂 和 丰富 多 彩 ， 图 文 
显示 仅仅 是 网 页 功能 的 一 部 分 ， 于 是 ， 和 天 量 且 疼 形 领域 顺 有 造 放 的 SVG 
开始 迎 来 了 自己 的 第 一 春 。 








不 知 大 家 有 没有 思考 过 这 样 的 问题 : 为 什么 CSS 世 界 的 图 文 显示 能 


力 那么 强 ? 为 什么 它 可 以 抑制 SVG 这 么 多 年 ? 


1.3.1 何 为 “ 流 ” 


和 CSS 有 过 杀 密 接触 的 人 一 定 听 过 “文档 流 ” 这 个 概念 ， 我 个 人 总 是 
习惯 把 “文档 ”一 字 去 掉 ， 直 接 称 为 “ 流 ”( 纯 粹 个 人 爱好 ， 因 为 够 简 
洁 ) 。 听 过 和 它 的 人 很 多 ， 但 是 ， 深 入 思考 过 “ 何 为 流 ? ”这 个 问题 的 人 怕 
是 就 没 这 么 多 了 。 





那 完 竟 CSS 世 界 中 的 “ 流 ” 指 的 是 什么 呢 ? “ 流 ? 实 际 上 是 CSS 志 界 中 
的 一 种 基本 的 定位 和 布局 机 制 ， 可 以 理解 为 现实 世界 的 一 套 物 理 规 
则 ，“ 流 ” 跟 现实 世界 的 “水 流 " 有 异曲同工 的 表现 。 


现实 世界 中 ， 如 果 我 们 让 水 流入 一 个 容器 ， 水 面 一 定 是 平整 的 ， 我 
们 在 水 里 面 放 入 物体 ， 如 普通 的 木头 ， 此 时 水 位 就 会 上 升 ， 木 头 多 半 浮 
在 水 面 上 ， 但 只 露出 一 点 点 头 ， 如 图 1-3 所 示 。 这 些 现象 我 们 都 会 认为 
征 理 所 当然 的 ， 因 为 这 就 是 我 们 从 小 接触 的 一 套 物理 规则 。 我 们 知道 这 
套 规则 ， 就 可 以 理解 现象 ， 并 且 预 知 现象 。 例 如 ， 水 量 超过 容器 的 容积 
很 多 ， 我 们 就 可 以 预测 到 水 会 洪 出 来 。 


感谢 物理 学 ， 它 让 我 们 理解 CSS 世 界 的 “ 流 ? 就 轻松 多 了 。CSS 世 界 
的 “* 流 ”似乎 就 是 按照 物理 世界 的 "水流 ?创造 的 。 





CSS 世 界 构建 的 基石 是 HTML， 而 HTML 最 具 代 表 的 两 个 基石 <div> 
和 <span> 正 好 是 CSS 志 界 中 块 级 元 素 和 内 联 级 元 素 的 代表 ， 它 们 对 应 的 
正 是 图 1-3 所 示 的 盛 水 容器 中 的 水 和 木头 ， 其 特性 表现 也 正如 现实 世界 





的 水 和 木头 ， 如 图 1-4 所 示 。 








水 流 会 自动 铺 满 容器 放 入 木头 ， 水 位 升 高 ， 木 头 依次 排列 
图 1-3 流 
div 自 动 铺 满 容器 图 片 文字 依次 排列 ， 不 足 则 换行 





、 Ye 


图 1-4 ”CSS 世界 构建 的 基石 HTML 


所 以 ， 所 谓 * 流 ”， 就 是 CSS 世 界 中 引导 元 素 排列 和 定位 的 一 条 看 不 
见 的 “水 流 ”。 


1.3.2 ” 流 是 如 何 影响 整个 CSS 世 界 的 


在 CSS2.1 时 代 ， 我 们 直接 称 CSS 为 “ 流 的 世界 ?真是 一 点 儿 也 不 为 
过 ， 整 个 CSS 世 界 几 乎 就 是 围绕 * 流 ”来 建立 的 ， 那 么 流 是 如 何 影 响 整个 
CSS 世 界 的 呢 ? 


(1) 扒 贼 先 扒 王 。 因 为 CSS 世 界 的 基石 是 HITML， 所 以 只 要 让 
HTML 默 认 的 表现 符合 “ 流 ”， 那 么 整个 CSS 世 界 就 可 以 被 “ 流 ?” 统 治 ， 而 


事实 就 是 如 此 ! 


(2) 特殊 布局 与 流 的 破坏 。 如 果 全 部 都 是 以 默认 的 “ 流 ? 来 洽 染 ， 
我 们 只 能 实现 类 似 W3C 那 样 的 文档 网 页 ， 但 是 ， 实 际 的 网 页 是 有 很 多 复 
杂 的 布局 的 ， 怎 么 办 ? 可 以 通过 破坏 “ 流 ? 来 实现 特殊 布局 。 实 际 上 ， 还 
是 和 “ 流 ” 打 交道 。 





(3) 流 回 的 改变 。 默 认 的 流向 是 “一 江 春 水 辐 东 流 ”， 以 及 “ 飞 流下 
下 三 千 矿 ”。 然 而 ， 这 种 流 同 我 们 是 可 以 改变 的 ， 可 以 让 CSS 的 展现 更 
为 丰富。 因此 , “文档 流 从 左 往 右 目 上 而 下 ”这 种 说 法 是 不 严 齐 的 ， 大 家 
一 定 要 纠正 过 来 。 


好 了 ， 下 面 我 想 反 问 大 家 : 如 果 你 是 造物 主 ， 你 会 想到 设计 “ 流 ” 这 
僚机 制 来 实现 强大 的 图 文 排列 功能 吗 ? 














好 好 想 一 想 ..…. 是 不 是 觉得 目前 CSS 的 设计 还 是 很 有 智慧 的 ? 如 果 
你 来 重新 设计 CSS， 实 现 图 文 排列 ， 你 是 否 还 有 其 他 的 设计 思路 ， 比 方 
说 “亲缘 机 制 * 之 类 ? 


适当 地 反问 这 些 问 题 ， 通 过 道 向 思维 ， 会 让 我 们 对 CSS 世 界 有 另外 
一 个 角度 的 认识 。 
1.3.3 ”什么 是 流体 布局 

所 谓 “ 流 体 布局 ?， 指 的 是 利用 元 素 “ 流 ”的 特性 实现 的 各 类 布局 效 
果 。 因 为 “ 流 ” 本 身上 有 具 有 目 适 应 特性 ， 所 以 “流体 布局 ”往往 都 是 具有 上 自 适 


应 性 的 。 但 是 , “流体 布 局 ”并 不 等 同 于 “ 目 适 应 布局 "。“ 目 适应 布局 ”是 
对 凡是 具有 目 适 应 特性 的 一 类 布局 的 统称 , “流体 布局 ”要 狭 罕 得 多 。 例 























如 ， 表 格 布局 也 可 以 设置 为 100% 自 适应 ， 但 表格 和 * 流 ”不 是 一 路 的 ， 
并 不 属于 “流体 布局 ”。 


CSS 中 最 常用 的 魔法 石 ， 也 就 是 最 常 使 用 的 HTML 标 签 ， 
是 <div>， 而 <div> 是 典型 的 具有 “ 流 ” 特 性 的 元 素 ， 因 此 ， 曾 经 风靡 
的 “div+CSS 布 局 ?， 实 际 上 指 的 就 是 这 里 的 “流体 布局 ”。 


1.4 CSS 世界 的 开启 从 IE8 开 始 


本 书 书 名 为 《CSS 世 界 》， 这 里 的 “世界 ” 特 指 的 是 CSS2.1 的 世界 ， 
并 不 包括 CSS3，CSS3 的 世界 更 为 庞杂 和 宏大 ， 但 CSS2.1 的 世界 已 经 足 
够 我 们 畅游 很 多 年 了 。 现 在 前 端 技术 发 展 迅猛 ， 加 上 氛围 略 显 浮躁 ， 有 
必要 让 广大 前 端 开发 人 员 静 下 心 来 认识 CSS2.1 的 世界 ， 否 则 面 对 CSS3 
的 真正 到 来 ， 只 能 是 浅水 游 尺 、 搬 砖 打 杂 。 


对 CSS2.1 的 全 面 支持 是 从 微软 公司 的 下 8 开始 的 ， 因 此 ， 本 书 中 几 
乎 所 有 特性 、 行 为 表现 都 是 针对 正 8 以 上 浏览 器 的 。 


1.5 ” table 自己 的 世界 


如 果 我 没 记 错 的 话 ，<table> 比 CSS 还 要 老 ， 也 就 是 CSS 正 式 诞生 
之 前 ，<table> 就 已 经 出 现 了 。 前 面 提 到 了 “ 流 影响 了 整个 CSS 世 界 ”， 
其 中 并 不 包括 <table>。<table> 有 着 自己 的 世界 ，“ 流 ”的 特性 对 
<table> 并 不 适用 ， 一 些 CSS 属 性 的 表现 ， 如 单元 格 的 vertical- 
align， 也 和 普通 的 元 素 不 一 样 。 





虽然 CSS2.1 加 强 了 和 <table> 的 联系 ， 如 对 table 类 别 的 display 
属性 值 的 支持 等 ， 但 是 本 书 并 不 会 对 <table> 进 行 专门 的 介绍 ， 因 为 毕 
竟 不 是 同一 个 世界 的 。 





1.6 CSS 新 世界 一 一 CSS3 





时 代 在 变迁 ， 科 技 在 有 发展 ， 人 们 对 互联 网 的 需求 也 在 变化 ， 以 前 的 








以 图 文 展 示 为 主 的 门户 网 站 已 经 无 法 满足 用 户 的 需求 。 技 术 总 是 随 着 需 
求 发 展 的 ， 正 如 10 年 前 的 图 文 展 示 需 求 缔 造 了 CSS 世 界 一 样 ， 如 今 的 移 
动 互联 网 以 及 硬件 发 展 也 带动 CSS 进 入 了 新 的 世界 。 


(1) 布局 更 为 丰富 。 





移动 端的 凯 起 ， 催 生 了 CSS3 媒 介 碍 询 以 及 许多 啊 应 式 布局 特性 的 
出 现 ， 如 图 片 元 素 的 srcset 属 性 、CSS 的 object-fit 属 性 。 
弹性 盒子 布局 〈flexible box layout) 终于 熬 出 了 头 。 

格 栅 布 局 〈grid layout) 姗 姗 来 迟 。 


(2) 视觉 表现 长 足 进步 。 





圆 角 、 阴 影 和 渐变 让 元 素 更 有 质感 。 
transform 变 换 让 元 素 有 更 多 可 能 。 

filter 滤 镜 和 混合 模式 让 Web 轻 松 变 成 在 线 的 Photoshop:; 
animation 让 动画 变 得 非常 简单 。 








上 面 提 到 的 全 部 都 是 CSS3 的 新 属性 。 因 为 CSS3 的 设计 初衷 是 为 了 


实现 更 丰 定 、 更 复杂 的 网 页 ， 所 以 基本 上 和 “ 流 * 的 关系 并 不 大 。 可 以 





和 CSS2 相 比 CSS3 就 是 一 个 全 新 的 世界 ， 更 加 丰富 ， 更 加 规范 ， 更 


加 体系 化 ， 也 更 加 复杂 。 考 虑 到 CSS3 尚 未 完全 成 型 ， 且 自己 尚未 有 足 
够 深入 的 研究 ， 无 法 同时 驾驭 太 复 林 的 内 容 ， 因 此 ， 本 书 不 会 深入 





CSS3 的 知识 点 。 


第 2 章 ” 需 提 前 了 解 的 术语 和 概念 


2.1 务必 了 解 的 CSS 世 界 的 专业 术语 


尽管 本 书 内 容 会 用 很 轻松 的 方式 表达 ， 但 还 是 避免 不 了 会 出 现 一 些 
CSS 领 域 的 专业 术语 。 因 此 ， 在 学 习 技 术 内 容 之 前 ， 我 们 需要 先 了 解 一 
下 CSS 世 界 里 的 一 些 专业 术语 。 

首先 ， 假 设 我 们 现在 有 如 下 一 段 和 常见 的 CSS 人 代码: 


.Vocabulary { 
height: 99px; 
color: transparent; 


} 


下 面 就 针对 这 上 段 代码 ， 逐 一 引出 其 涉及 的 专业 术语 。 
1. 属性 





属性 对 应 的 是 平常 我 们 书面 或 交谈 时 对 CSS 的 中 文 称谓 。 例 如 ， 上 
面 示意 CSS 代 码 中 的 height 和 color 就 是 属性 。 当 我 们 聊天 或 者 分 享 时 
说 起 CSS 的 时 候 ， 嘴 里 冒 出 来 的 都 是 “这 个 元 素 高 度 99 像 素 ”， 或 者 “这 个 
文字 瑚 色 透 明 "”， 对 吧 ? 这 里 提 到 的 “高 上 度 ”? 和 “ 闫 色 ” 就 是 CSS 世 界 的 属 
性 ， 感 觉 有 点 儿 像 现实 世界 里 人 的 姓氏 。 


2 但 
“ 值 ? 大 多 与 数字 挂钩 。 例 如 ， 上 面 的 99px 就 是 典型 的 值 。 在 CSS 世 


界 中 ， 值 的 分 类 非常 广泛 ， 下 面 是 一 些 常 用 的 类 型 。 


。 整数 值 ， 如 z-index:1 中 的 1， 属 于 <integer>， 同 时 也 属于 
<number>。 

。 数值 ， 如 line-height:1.5 中 的 1.5， 属 于 <number>。 

。 百分比 值 ， 如 padding:56% 中 的 56%， 属 于 <percent>。 

。 长 度 值 ， 如 99px。 

。 颜色 值 ， 如 #999。 


此 外 ， 还 有 字符 串 值 、 位 置 值 等 类 型 。 在 CSS3 新 世界 中 ， 还 有 和 角 
度 值 、 频 率 值 、 时 间 值 等 类 型 ， 这 里 就 不 全 部 展示 了 。 


3. 关键 字 


顾名思义 ， 关 键 字 指 的 是 CSS 里 面 很 关键 的 单词 ， 这 里 的 单词 特 指 
英文 单词 ，abc 是 单词 吗 ? 不 是 ， 因 此 ， 如 果 CSS 中 出 现 它 ， 一 定 不 是 
关键 字 。 上 面 示例 CSS 代 码 中 的 transparent 就 是 典型 的 关键 字 ， 还 有 
常见 的 solid、inherit 等 都 是 关键 字 ， 其 中 inherit 也 称 作 “ 泛 关 键 
字 ”， 所 谓 泛 关键 字 ， 可 以 理解 为 “公交 车 关键 字 ”， 就 是 “所 有 CSS 属 性 
都 可 以 使 用 的 关键 字 ” 的 意思 。 

















CSS 中 目前 可 以 称 为 变量 的 比较 有 限 ，CSS3 中 的 currentColor 就 
是 变量 ， 非 常 有 用 。 不 过 ， 这 属于 《CSS 新 世界 》 的 内 容 ， 本 书 不 会 详 
细 曾 述 ， 有 兴趣 的 读者 可 以 访问 http://www.zhangxinxu.com/wordpress/? 
p=4385 或 者 扫 右 侧 的 二 维 码 ， 做 简单 的 了 解 。 








5. 长 度 单位 


CSS 中 的 单位 有 时 间 单 位 (如 s、ms ) ， 还 有 角度 单位 〈 如 
deg、rad 等 ) ， 但 最 常见 的 自然 还 是 长 度 单位 (如 px、em 等 ) 。 需 要 
注意 的 是 ， 诸 如 2% 后 面 的 百 分 号 % 不 是 长 度 单位 。 再 说 一 遍 ，% 不 是 长 度 
单位 ! 因为 2% 就 是 一 个 完整 的 值 ， 就 是 一 个 整体 ， 我 想 你 一 定 认 
为 9.82 是 值 ， 没 错 ，2% 也 同样 是 值 。 








有 人 可 能 会 有 疑问 ， 我 就 认为 % 是 单位 ， 有 什么 关系 ， 页 面 还 是 长 
那样 ， 有 必要 这 么 较真 吗 ? 


问 的 很 在 理 ， 如 果 大 家 平时 没有 看 原始 文档 的 习惯 ， 没 必要 较真 ， 
知道 怎么 使 用 就 好 了 。 但 是 ， 如 果 经 常 去 MDN 或 W3C 看 一 些 CSS 技 术 
文 要 ， 搞 清楚 概念 ， 看 文档 的 时 候 就 不 容易 犯 迷糊 ， 就 不 会 看 不 懂 具 体 
说 些 什么 ， 尤 其 都 是 英文 的 时 候 。 








可 能 有 人 会 有 疑问 ,“ 值 ”那里 提 到 的 <length>， 貌 似 和 这 里 的 “长 
度 单 位 ?比较 暧昧 啊 ? 好 眼力 ! 没 错 ， 确 实 暧 昧 ， 但 暧昧 是 不 好 的 ， 我 
们 必须 把 它们 之 间 的 关系 搞 清 楚 。 一 句 话 : 


<number> + 长 度 单位 = <length> 


如 果 继 续 细 分 ， 长 度 单位 又 可 以 分 为 相对 长 度 单位 和 绝对 长 度 单 


位 


(1) 相对 长 度 单 位 。 相 对 长 度 单位 又 分 为 相对 字体 长 度 单 位 和 相 
对 视 区 长 度 单位 。 


。 相对 字体 长 度 单位 ， 如 em 和 ex， 还 有 CSS3 新 世界 的 rem 和 ch ( 字 
符 0 的 宽度 ) 。 
。 相对 视 区 长 度 单 位 ， 如 vh、vw、vmin 和 vmax。 


(2) 绝对 长 度 单位 : 最 常见 的 就 是 px， 还 有 pt、cm、mm、pc 等 了 
解 一 下 就 可 以 ， 在 我 看 来 ， 它 们 实用 性 近乎 零 ， 至 少 我 这 么 多 年 一 次 都 
没 用 过 。 


EX 
es 


6. 功能 各 


值 以 函数 的 形式 指定 《就 是 被 括号 括 起 来 的 那 种 ) ， 主 要 用 来 表示 
颜色 (rgba 和 hsla) 、 背 景 图 片 地 址 (url1) 、 元 素 属 性 值 、 计 算 
(calc) 和 过 渡 效 果 等 ， 如 rgba(8,8,6,.5)、url('css- 
world.png')、attr('href') 和 scale(-1)。 


7. 属性 值 





属性 冒号 后 面 的 所 有 内 容 统 一 称 为 属性 值 。 例 如 ，1px solid 
rgb(6,6,6) 就 可 以 称 为 属性 值 ， 它 是 由 “ 值 + 关键 字 + 功 能 符 ” 构 成 的 。 
属性 值 也 可 以 由 单一 内 容 构 成 。 例 如 ，z-index:1 的 1 也 是 属性 值 。 


8. 声明 


属性 名 加 上 属性 值 束 是 声明 ， 例 如 : 





color: transparent 


9. 声明 块 


声明 块 是 花 括号 ({}) 包 庄 的 一 系列 声明 ， 例 如 : 


{ 


height: 99px; 
color: transparent; 


} 


10. 规则 或 规则 集 








出 现 了 选择 器 ， 而 且 后 面 还 跟着 声明 块 ， 比 如 本 小 节 一 开始 的 那个 
例子 ， 束 是 一 个 规则 集 : 
.vocabulary { 

height: 99px; 


color: transparent; 


} 
11. 选择 器 
选择 器 是 用 来 胶 准 目标 元 素 的 东西 ， 例 如 ， 上 面 的 .vocabulary 束 


是 一 个 选择 器 。 








。 类 选择 器 : 指 以 “.” 这 个 点 号 开头 的 选择 占 。 很 多 元 素 可 以 应 用 同 
一 个 类 选择 器 。“ 类 ”， 天 生 就 是 被 公用 的 命 。 

。 JID 选 择 器 :“# 打 头 ， 权 重 相 当 高 。ID 一 般 指 同上 唯一 元 素 。 但 是 ， 

在 CSS 中 ，ID 样 式 出 现在 多 个 不 同 的 元 素 上 并 不 会 只 泻 染 第 一 个 ， 

而 是 雨露 均 沾 。 但 显然 不 推荐 这 么 做 。 

属性 选择 器 : 指 含有 [] 的 选择 器 ， 形 如 [title]{}、[title= 
"css-world"]{}、 [title~="css-world" |]{}、 [title^="css- 





world"]{} 和 [title$="css-world"]{} 等 。 
。 伪 类 选择 器 : 一 般 指 前 面 有 个 英文 冒号 〈:) 的 选择 器 ， 
如 :first-child 或 :last-child 等 。 
。 伪 元 素 选 择 器 : 就 是 有 连续 两 个 冒号 的 选择 器 ， 如 : :first- 


line::first-letter、::before 和 和 ::after。 


12. 关系 选择 器 





关系 选择 器 是 指 根据 与 其 他 元 聚 的 关系 选择 元 素 的 选择 器 ， 第 见 的 
符号 有 空格 、>、~， 还 有 + 等 ， 这 些 都 是 非常 音 用 的 选择 需 。 


。 后 代 选 择 器 : 选择 所 有 合乎 规则 的 后 代 元 素 。 空 格 连接 。 

。 相 邻 后 代 选 择 器 : 仅仅 选择 合乎 规则 的 儿子 元 素 ， 孙 子 、 重 孙 元 象 
忽略 ， 因 此 又 称 “ 子 选择 器 *。> 连 接 。 适 用 于 IE7 以 上 版 本 。 

。 兄弟 选择 右 : 选择 当前 元 素 后 面 的 所 有 合乎 规则 的 兄 第 元 系 。^~ 连 
接 。 适 用 于 IE7 以 上 版 本 。 

。 相 邻 兄 贡 选 择 器 : 仅仅 选择 当前 元 素 相 邻 的 那个 合乎 规则 的 兄弟 元 
素 。+ 连 接 。 适 用 于 IE7 以 上 版 本 。 














13. @ 规 则 


@ 规 则 指 的 是 以 @ 字 符 开 始 的 一 些 规则 ， 像 @media、@font- 
face、@page 或 者 Osupport， 诸 如 此 类 。 


2.2 了 解 CSS 世 界 中 的 “未 定义 行为 ” 


当 茶 个 浏览 器 中 出 现 与 其 他 浏览 融 不 一 样 的 行为 或 样式 表现 的 时 
候 ， 我 们 总 会 习惯 把 这 种 不 一 样 的 表现 认为 是 浏览 器 的 bug。 但 在 CSS 
世界 ， 这 种 认识 是 狭隘 的 。 


在 现实 世界 中 ， 有 法 律 来 约束 我 们 的 行为 ， 如 果 越 界 ， 就 称 为 违 
法 ;同样 地 ， 在 CSS 世 界 里 ， 有 Web 标 准 来 约束 元 素 的 行为 ， 如 果 越 
界 ， 就 称 为 bug。 但 是 ， 法 律 总 是 人 制定 的 ， 世 间 万 象 是 不 可 能 面 面 俱 
到 的 ， 会 存在 法 律 空 和 白 ， 同 样 地 ，Web 应 用 场景 干 变 万 化 ，Web 标 准 也 
是 不 可 能 面面俱到 的 ， 也 会 存在 规范 描述 以 外 的 场景 ， 此 时 ， 各 大 浏览 
器 三家 只 能 根据 自己 的 理解 与 喜好 去 实现 ， 一 旦 个 性 化 就 会 出 现 差异 ， 
就 会 遇 到 “火狐 火狐 ， 你 怎么 啦 ? 平时 表现 挺 好 的 ， 今 天 怎么 被 正人 带 坏 
了 ? ”的 情景 。 实 际 上 ， 此 时 遇 到 的 表现 差异 并 不 是 浏览 器 的 pug， 用 计 
算 机 领域 的 专业 术语 描述 应 该 是 “未 定义 行为 ”(undefined behavior) 。 
































下 面 我 们 来 看 一 个 “未 定义 行为 ”的 例子 。 


CSS 世 界 中 有 很 多 伪 类 ， 其 中 一 个 比较 常用 的 就 是 :active， 在 IE8 
及 以 上 版 本 的 浏览 器 行为 表现 非常 统一 ， 支 持 非 焦 点 元 素 册 ， 鼠 标 按 
下 ， 执 行 :active 伪 类 对 应 的 CSS 样 式 ， 鼠 标 抬 起 还 原 。 





通用 情况 下 ，:active 的 表现 都 是 符合 预期 的 ， 但 是 ， 当 遭遇 其 他 
一 些 处 理 的 时 候 ， 事 情 束 会 变 得 不 一 样 ， 有 具体 指 什么 处 理 呢 ? 





假设 我 们 现在 有 一 个 <a> 标 签 模拟 的 按钮 ，CSS 如 下 : 


假设 此 按钮 的 DOM 对 象 变量 名 为 button，JavaScript 代 码 如 下 : 


button.addEventListener("mousedown", function(event) { 


// 此 处 省 略 N 行 

















event .preventDefault() ; 
]) ; 





也 就 是 鼠标 按 下 的 时 候 ， 阻 止 按 钮 的 球 认 行为 ， 这 样 设置 可 以 让 拖 动 效 
果 更 流畅 。 


看 似 平淡 无 奇 的 一 段 代 码 ， 最 后 却 发 生 了 意 想不到 的 情况 : Firefox 
浏览 器 的 :active 了 阵亡 了 ， 鼠 标 按 下 去 没有 UI 变化 ， 按 钮 背景 没有 变 
红 ! 其 他 所 有 浏览 器 ， 如 正和 Chrome 浏 览 器 ，:active 正 常 变 红 ， 符 合 
预期 。 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/2/2-1.php 或 者 扫 下 面 的 
二 维 码 。 图 2-1 左 图 所 示 为 目标 效果 ， 右 图 所 示 是 Firefox 浏 览 器 中 的 效 
果 。 











图 2-1 Firefox 浏 览 器 :active 的 作用 效果 





1 响 A 器 


这 里 ，Firefox 和 IE/Chrome 浏 览 右 表现 不 一 样 ， 这 是 Firefox 汶 | 
的 bug 吗 ?这 可 不 是 bug， 而 是 因为 规范 上 并 没有 对 这 种 场景 的 具体 擂 
述 ， 所 以 Firefox 认 为 :active 发 生 在 mousedown 事 件 之 后 ， 你 也 不 能 说 
它 什 么 ， 对 吧 ? 


像 这 种 规范 顾及 不 到 的 细 权 来 节 的 实现 ， 就 称 为 未 定义 行为 ”。 





[1] 像 : a>、< button> 这 样 的 元 素 ， 当 我 们 使 用 键盘 ee 
的 时 候 ， 是 可 以 被 focus 的 ， 表 现 为 虚 框 或 者 外 发 光 ， 这 类 元 又 称 为 " 焦 
点 元 素 ”; 非 焦点 元 素 指 没有 设置 tabindex 属 性 的 < div>、< span> 等 
普通 元 隶 。 在 IE6/IE7 浏 览 句 下 ， 非 焦点 元 素 对 :active 置 行头 闻 。 





第 3 章 ” 流 、 元 素 与 基本 尺寸 





第 1 章 提 过 了 ，“ 流 ”之 所 以 影响 了 整个 CSS 世 界 ， 就 是 因为 影响 了 
CSS 世 界 的 基石 HTML。 那 具体 是 如 何 影 响 的 呢 ? 


HTML 和 常见 的 标签 有 <div>、<p>、<1i> 和 <table> 以 及 
<span>、<img>、 和 <em> 和 等。 虽然 标签 种 类 繁多 ， 但 通常 我 们 惑 把 它 
们 分 为 两 类 : 块 级 元 素 〈(block-level element) 和 内 联 元 素 (inline 


element) 。 


注意 ， 如 果 按 照 W3C 的 CSS 规 范 区 分 ， 这 里 应 该 分 为 “ 块 级 元 

素 ” 和 “内 联 级 元 素 ” (inline-level element) 。 但 是 ， 在 WwW3C 的 HTML4 规 
范 中 ， 已 经 明确 把 HIML 元 素 分 成 了 “ 块 级 元 素 " 和 * 内 联 元 素 "， 没 错 ， 
是 “内 联 元 系 ” 而 不 是 “内 联 级 元 系 ”"。 两 个 规范 貌似 有 微小 的 冲突 。 本 书 
中 所 采用 的 是 “内 联 元 素 ” 这 种 称谓 ， 原 因 有 两 点 : 第 一 ， 这 种 称谓 更 杀 
切 、 更 自然 ， 因 为 大 家 平时 都 是 这 么 叫 的 ;第 二 ， 使 用 “内 联 元 素 ” 这 个 
称谓 对 我 们 深入 理解 与 内 联 相 关 的 概念 并 没有 什么 影响 。 考 虑 到 本 书 的 
目的 不 是 为 CSS 规 范 做 科普 ， 而 是 以 通俗 易 懂 方式 展示 CSS 的 精彩 世 
界 ， 所 以 ， 采 用 了 更 老 一 点 的 HIML 规 范 中 的 叫 法 。 











3.1 块 级 元 素 





“ 块 级 元 素 ” 对 应 的 英文 是 block-level element， 常 见 的 块 级 元 素 
有 <div>、<1i> 和 和 <table> 等 。 需 要 注意 是 ，“ 块 级 元 素 ”* 和 “display 为 
block 的 元 素 * 不 是 一 个 概念 。 例 如 ，<1i> 元 素 默 认 的 display 值 
是 list-item，<table> 元 素 默 认 的 display 值 是 table， 但 是 它们 均 
是 “ 块 级 元 素 "， 因 为 它们 都 符合 块 级 元 素 的 基本 特征 ， 也 就 是 一 个 水 平 
流 上 只 能 单独 显示 一 个 元 素 ， 多 个 块 级 元 素 则 换行 显示 。 











正 是 由 于 “ 块 级 元 系 ” 具 有 换行 特性 ， 因 此 理论 上 它 都 可 以 配 
合 clear 属 性 来 清除 浮动 带 来 的 影响 。 例 如 : 








.Clear:after { 
content: "" 





display: table; // 也 可 以 是 block， 或 者 是 list-item 
clear: both; 





} 


手动 输入 http://demo.cssworld.cn/3/1-1.php 或 者 扫 右 侧 的 二 维 码 。 








从 容器 的 背景 色 高 度 变化 我 们 可 以 看 出 清除 的 效果 ， 如 图 3-1 所 
外。 


a 


请 选择 靖 除 浮动 的 方法 : 





请 选择 清除 浮动 的 方法 : 


.Clear:after { 


.Clear:after { 
content: - 


content: "" 


display: | 请 选择 v|; . ; 
clear: both; lsplay able 


clear: both; 


~ 


图 3-1 容器 的 背景 色 高 度 变 化 的 效果 


实际 开发 时 ， 我 们 要 么 使 用 block， 要 么 使 用 table， 并 不 会 使 
用 1ist-item， 主 要 有 3 个 原因 。 


(1) 1 个 字符 的 比较 多 ， 其 他 都 是 5 个 字符 。 


(2) 会 出 现 不 需要 的 项 目 符号 ， 如 图 3-2 箭 头 所 示 。 这 其 实 并 不 是 
什么 大 问题 ， 再 加 一 行 1ist-style:none 声 明 就 可 以 了 。 


(3) IE 浏 览 器 不 支持 伪 元 素 的 display 值 为 list-item。 这 是 不 
使 用 display:1ist-item 清 除 浮 动 的 主因 ， 兼 容 性 不 好 。 对 于 了 下 浏览 
器 〈 包 括 IE11) ， 普 通 元 素 设 置 display:1ist-item 有 效 ， 但 
是 :before/ :after 伪 元 素 就 不 行 。 


by 





请 选择 靖 除 浮动 的 方法 : 


.Clear:after { 
content: "' 


display: |list-item |; 


clear: both; 


图 3-2 ”出 现 项 目 符号 


下 面 是 提问 环节 了 。 请 问 ， 为 什么 下 浏览 器 不 支持 伪 元 素 的 
display 值 为 list-item 呢 ? 


其 实 这 个 问题 的 答案 可 以 从 下 面 这 个 问题 中 找到 线索 : 请问， 为 什 
么 设置 display:1ist-item， 元 素 会 出 现 项 目 符号 ? 





3.1.1 为 什么 list-item 元 素 会 出 现 项 目 符号 


在 CSS 志 界 中 ， 很 多 看 似 “ 理 所 当然 ”的 现象 的 上 背后， 实际 上 可 能 有 
一 整套 的 体系 文 撑 。 挖 掘 简单 现象 背后 的 原因 ， 会 让 你 学 到 很 多 别人 很 
难 学 到 的 CSS 技 能 和 知识 。 





回 到 这 个 问题 。 此 问题 本 里 并 不 难 ， 但 是 ， 问 题 所 能 延伸 出 来 的 东 


西 束 要 吓 到 诸位 了 。 此 问题 率 扯 到 CSS 世 界 中 各 种 盒子 。 








由 于 牵扯 名 词 甚 多， 所 以 我 尽量 以 通 众 易 全 的 方式 给 大 家 解释 。 


创造 CSS 的 造物 主 原 本 的 想法 很 简单 : 我 要 创造 一 个 世界 ， 就 像 只 
有 男性 和 女性 一 样 ， 这 个 世界 只 有 块 级 盒子 (block-level box) 和 内 联 
盒子 (inline box) 。 块 级 盒子 束 负 贡 结 构 ， 内 联 盒 子 就 负 员 内容 。 事 非 
经 过 不 知 难 ， 造 物 主 后 来 才 发 现 ， 这 世界 不 止 有 男性 和 女性 ， 还 有 特殊 
的 性 别 ，CSS 世 界 的 盒子 也 是 这 样 。 


原本 以 为 块 级 盒子 一 套 就 够 用 了 ， 也 就 是 所 有 “ 抉 级 元 素 ” 就 只 有 一 
个 “ 抉 级 盒子 "”， 但 是 ， 半 路 杀 出 个 1ist-item， 其 默认 要 显示 项 目 符号 
的 ， 一 个 盒子 解释 不 了 ， 怎 么 办 ? 








就 跟 我 们 写 JavaScript 组 件 遇 到 新 功能 增加 API 一 样 ， 天 神灵 机 一 
动 : 我 给 list-item 再 重新 命名 一 个 盒子 ， 就 叫 “ 附 加 盒子 ”>。 好 了 ， 这 
下 顺 了 ， 所 有 的 “ 块 级 元 素 ” 都 有 一 个 “ 主 块 级 盒子 ”，1ist-item 除 此 之 
外 还 有 一 个 “附加 盒子 ”。 


现在 大 家 知道 上 面 问题 的 答案 了 吧 ! 之 所 以 list-item 元 素 会 出 现 
项 目 符 号 是 因为 生成 了 一 个 附加 的 盒子 ， 学 名 “标记 盒子 ”(marker 
box) ， 专 门 用 来 放 圆 点 、 数 字 这 些 项 目 符号 。 焉 浏览 器 下 伪 元 素 不 文 
持 1ist-item 或 许 就 是 无 法 创建 这 个 “标记 盒子 "导致 的 。 








但 是 ， 我 们 的 故事 还 没 结 束 。 搞 定 了 1ist-item， 天 神 本 以 为 可 以 
安安 心心 睡 个 午觉 ， 结 果 人 页 到 了 真正 的 特殊 性 别 的 display:inline- 
block 元 素 。 


守 着 inl1ine 的 皮 关 着 block 的 心 ， 现 有 的 几 个 盒子 根本 没 法 解释 
啊 ， 怎 么 办 ? 


造物 主 再 次 灵机 一 动 ， 没 错 ， 你 猜 对 了 ， 又 新 增 一 个 合子， 也 残 是 
每 个 元 素 都 两 个 盒子 ， 外 在 盒子 中 和 内 在 盒子 。 外 在 盒子 负责 元 素 是 可 
以 一 行 显示 ， 还 是 只 能 换行 显示 ; 内 在 盒子 负责 党 高 、 内 容 呈 现 什 么 
的 。 但 是 呢 ， 造 物 主 义 想 了 想 ， 叫 “内 在 盒子 ?虽然 容易 理解 ， 但 是 未 锡 
有 些 俗 气 ， 难 登 大 雅之 香 ， 于 是 ， 又 想 了 一 个 更 专业 的 名 称 ， 叫 作 ”“ 容 
如 例子 ”。 




















于 是 ， 按 照 display 的 属性 值 不 同 ， 值 为 block 的 元 素 的 盒子 实际 
由 外 在 的 “ 块 级 盒子 ”和 内 在 的 “ 块 级 容器 盒子 ”组 成 ， 值 为 nline- 
block 的 元 素 则 由 外 在 的 “内 联 盒子 ?和 内 在 的 “ 块 级 容器 盒子 ”组 成 ， 值 
为 inline 的 元 素 则 内 外 均 是 “内 联 盒子 ”。 


现在 ， 大 家 应 该 明白 为 何 display 属 性 值 是 ijnline-block 的 元 素 
既 能 和 图 文 一 行 显示 ， 又 能 直接 设置 width/height 了 吧 ! 因为 有 两 个 
盒子 ， 外 面 的 盒子 是 in1ine 级 别 ， 里 面 的 盒子 是 block 级 别 。 





实际 上 ， 如 果 遵 循 这 种 理解 ，display:block 应 该 脑 补 
成 display:block-block，display:table 应 该 脑 补 
成 display:block-table， 我 们 平时 的 写法 实际 上 是 一 种 简写 。 


好 了 ， 说 了 这 么 多 ， 出 个 小 题 测试 一 下 大 家 的 学 习 成 果 。 请 
问 : display:inline-table 的 盒子 是 怎样 组 成 的 ? 





3.1.2 display:inline-table 的 盒子 是 怎样 组 成 的 


这 个 问题 应 该 无 压力 : 外 面 是 “内 联 盒 子 ， 里 面 是 “table 盒 子 ”。 得 
到 的 就 是 一 个 可 以 和 文字 在 一 行 中 显示 的 表格 。 








可 以 和 文字 在 一 行 中 显示 的 表格 ? 没 错 ， 为 了 证 明 我 没 忽 悠 大 家 ， 
我 特 音 做 了 个 演示 页 面 ， 演 示 页 面 中 <div> 元 素 的 相关 CSS 代 码 如 下 : 


.inline-table { 
display: inline-table; 
width: 128px; 


margin-left: 16px; 
border: 1px solid #cad5eb; 





手动 输入 http://demo.cssworld.cn/3/1-2.php 或 者 扫 下 面 的 二 维 码 。 结 
果 该 元 素 和 文字 一 行 显示 ， 且 行为 表现 如 同 真正 的 表格 元 素 〈 子 元 素 宽 
度 等 分 ) ， 如 图 3-3 所 示 。 














-I 





和 文字 平起平坐 的 表格 : 中 S 富 19 251 





图 3-3 ”表格 元 素 和 文字 在 一 行 显示 
上 面 示意 的 CSS 代 码 表面 上 看 起 来 很 简单 ， 但 是 ， 我 也 说 过 ， 人 简单 
的 背后 往往 是 不 简单 。 这 里 CSS 中 有 个 width:128px， 从 最 终 的 效果 来 
看 ， 宽 度 设置 是 起 作用 了 。 如 果 我 们 使 用 display:in1line-block 也 会 








是 同样 的 宽度 表现 。 下 面 问题 来 了 : 元素 都 有 内 外 两 个 盒子 ， 我 们 平常 
设置 的 width/height 属 性 是 作用 在 哪个 盒子 上 的 ? 
3.1.3 width/height 作 用 在 哪个 盒子 上 

这 个 问题 也 是 很 简单 的 ， 因 为 在 解释 内 外 盒子 的 时 候 就 已 经 提 到 过 
了 : 是 内 在 盒子 ， 也 就 是 “容器 盒子 ”。 








不 知 大 家 有 没有 进一步 深入 思考 过 : width 或 height 作 用 的 有 具体 细 


节 是 什么 呢 ? 


3.2 width/height 作 用 的 具体 细节 





因为 块 级 元 素 的 流体 特性 主要 体现 在 水 平方 向 上 ， 所 以 我 们 这 里 先 
着 重 讨论 width。 


估计 很 多 人 的 第 一 次 CSS 属 性 书写 就 献 给 了 width， 就 像 路 边 的 小 
草 ， 好 常见 、 好 平淡 、 好 简单 的 样子 。 如 果 你 有 这 样 的 想法 ， 此 书 你 就 
买 对 了 。 





3.2.1 深 藏 不 圳 的 width:auto 

我 们 应 该 都 知道 ，width 的 默认 值 是 auto。auto 因 为 是 默认 值 ， 所 
以 出 镜 率 不 高 ， 但 是 ， 它 却 是 个 深 藏 不 露 的 家 伙 ， 它 至 少 包 含 了 以 下 4 
种 不 同 的 宽度 表现 。 











(1) 充分 利用 可 用 空间 。 比 方 说 ，<div>、<p> 这 些 元 素 的 宽度 默 
认 是 100% 于 父 级 容器 的 。 这 种 充分 利用 可 用 空间 的 行为 还 有 个 专 有 名 
字 ， 叫 作 fil1-available， 大 家 了 解 即 可 。 





(2) 收缩 与 包 囊 。 典 型 代表 束 是 浮动 、 绝 对 定位 、inline-block 
元 素 或 table 元 素 ， 英 文 称 为 shrink-to-fit， 直 译 为 “收缩 到 合适 *?， 有 那 
么 点 儿 意思 ， 但 不 够 形象 ， 我 一 直 把 这 种 现象 称 为 " 包 衷 性”。CSS3 中 的 
fit-content 指 的 就 是 这 种 宽度 表现 。 





(3) 收缩 到 最 小 。 这 个 最 容易 出 现在 table-layout 为 auto 的 表 
格 中 ， 想 必 有 经 验 的 人 一 定 见 过 图 3-4 所 示 的 这 样 一 柱 擎 天 的 盛况 吧 ! 


眼见 为 实 ， 有 兴趣 的 读者 可 以 手动 输入 http:/demo.cssworld.cn/3/2- 
1.php 或 者 扫 下 面 的 二 维 码 。 





丈 
1 
列 
就 只 : EE ; 
当 父 级 relative , 且 | 当 父 级 relative , 且 
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“ | 如 如 
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出 现 一 柱 擎 天 的 情 当 现 一 柱 擎 天 的 情 


入 








图 3-4 ”单元 格 中 的 一 柱 擎 天 效果 














当 每 一 列 空间 都 不 够 的 时 候 ， 文 字 能 断 惑 断 ， 但 中 文 是 随便 断 的 ， 
英文 单词 不 能 断 。 于 是 ， 第 一 列 被 无 情 地 每 个 字 都 断 掉 ， 形 成 一 柱 擎 
天 。 这 种 行为 在 规范 中 被 描述 为 “preferred minimum width” 或 


者 “minimum content width”。 后 来 还 有 了 一 个 更 加 好 听 的 名 字 min- 


COntent。 


(4) 超出 容器 限制 。 除 非 有 明确 的 width 相关 设置 ， 否 则 上 面 3 种 
情况 尺寸 都 不 会 主动 超过 父 级 容器 宽度 的 ， 但 是 存在 一 些 特 殊 情 况 。 例 
如 ， 内 容 很 长 的 连续 的 英文 和 数字 ， 或 者 内 联 元 素 被 设置 了 white- 
space:nowrap， 则 表现 为 “恰似 一 江 春 水 回 东 流 ， 流 到 断崖 也 不 回 


例如 ， 看 一 下 下 面 的 CSS 代 码 : 


.father { 
width: 156px; 
background-color: #cd66080; 
white-space: nowrap; 


.Child { 
display: inline-block; 
background-color: #f6f3f9; 
} 





这 上 段 代 码 的 结果 如 图 3-5 所 示 。 






怡 如 一 江 春 水 向 东 流 ， 流 到 断崖 也 不 回头 


图 3-5 ”文字 超出 容器 也 不 换行 示意 








子 元 素 既 保持 了 inline-block 元 素 的 收缩 特性 ， 又 同时 让 内 容 宽 
度 最 大 ， 直 接 无 视 父 级 容器 的 宽度 限制 。 这 种 现象 后 来 有 了 专门 的 属性 
值 描述 ， 这 个 属性 值 叫 作 max-content， 这 个 属于 CSS3 新 世界 内 容 ， 
本 书 点 到 为 止 ， 不 深究 。 





眼见 为 实 ， 奉 有 兴趣 ， 可 以 手动 输入 http://demo.cssworld.cn/3/2- 
2.php 或 扫 右 侧 的 二 维 码 亲自 感受 一 下 。 
上 面 列 举 的 4 点 就 是 width :auto 在 不 同 场景 下 的 宽度 表现 的 


简介 。 


在 CSS 世 界 中 ， 盒 子 分 “内 在 盒子 ?和 “外 在 盒子 "， 显 示 也 分 “内 部 显 
示 ” 和 “外 部 显示 ”， 同 样 地 ， 尺 寸 也 分 “内 部 尺寸 "和 “外 部 尺寸 "。 其 
中 “内 部 尺寸 ?更 文 写 作 *Intrinsic Sizing”， 表 示 尺 寸 由 内 部 元 素 决 定 ; 还 
有 一 类 叫 作 “外 部 尺寸 "， 英 文 写作 “Extrinsic Sizing”， 宽 度 由 外 部 元 素 诀 
定 。 现 在 ， 考 考 大 家 : 上 面 4 种 尺寸 表现 ， 哪 个 是 “外 部 尺寸 ”? 哪个 





是 “内 部 尺寸 ”? 
这 里 就 不 卖 关 了 于 了 。 就 第 一 个 ， 也 就 是 <div> 默 认 宽 度 100% 显 示 ， 


是 “外 部 尺寸 "， 其 余 全 部 是 “内 部 尺寸 ”。 而 这 唯一 的 “外 部 尺寸 ”， 
古 “ 流 ”的 精 骨 所 在 。 


1. 外 部 尺寸 与 流体 特性 


(1) 正常 流 宽 度 。 当 我 们 在 一 个 容器 里 倒 入 足 量 的 水 时 ， 水 一 定 
会 均匀 铺 满 整 个 容器 ， 如 图 3-6 所 示 。 


水 流 会 自动 铺 满 容器 


AS 











图 3-6 ”水 流 自动 铺 满 容器 示意 

















在 页 面 中 随便 扔 一 个 <div> 元 素 ， 其 尺寸 表现 就 会 和 这 水 流 一 样 铺 
满 容 嚣 。 这 就 是 plock 容 器 的 流 特性 。 这 种 特性 ， 所 有 浏览 器 的 表现 都 
是 一 致 的 。 因 此 ， 我 就 实在 想 不 通 ， 为 何 那么 多 网 站 或 同行 会 有 类 似 下 
面 的 CSS 写 法 。 例 如 ， 一 个 垂直 导航 : 


a 
display: block; 


width: 1662%; 
} 





<a> 元 素 默认 diplay 是 inline， 所 以 ， 设 置 display:block 使 其 
块 状 化 绝对 没有 问题 ， 但 后 面 的 width:166% 就 没有 任何 出 现 的 必要 
hs 





我 很 多 年 前 总 结 过 一 套 “ 交 三 无 准则 ”， 即 “无 宽度 ， 无 图 片 ， 无 浮 
动 ”。 为 何 要 “无 宽度 ”? 原因 很 简单 ， 表 现 为 “外 部 尺寸 "的 块 级 元 素 一 
且 设 置 了 宽度 ， 流 动 性 就 丢失 了 。 





所 谓 流 动 性 ， 并 不 是 看 上 去 的 宽度 196% 显 示 这 么 简单 ， 而 是 一 种 





margin/border/padding 和 content 内 容 区 域 自动 分 配水 平 空间 的 机 
制 | 。 





我 们 来 看 一 个 简单 的 例子 ， 手 动 输入 http://demo.cssworld.cn/3/2- 
3.php 或 者 扫 右 侧 的 二 维 码 。 这 是 一 个 对 比 演示 〈 见 图 3-7〉 ， 上 下 两 个 
导航 均 有 margin 和 padding， 前 者 无 width 设置 ， 完 全 借助 流 特性 ， 后 
者 宽度 width :166%。 结 有 末 ， 后 者 的 尺寸 超出 了 外 部 的 容器 ， 完 全 就 不 
像 “ 水 流 ? 那 样 完全 利用 容器 空间 ， 即 所 谓 的 “流动 性 丢失 ”。 


无 宽度 ， 倍 助 流动 性 





width:100% 尺寸 超出 


导航 ] 








图 3-7 设 定 宽度 与 流动 性 缺失 





然 ， 实 际 开 发 的 时 候 ， 是 不 会 设置 宽度 100% 的 ， 毕 竟 有 显示 问 
题 。 此 时 ， 可 能 有 人 会 突然 灵光 一 现 ， 借 助 流动 性 来 实现 ..…. 要 是 这 样 
就 好 了 ， 然 而 其 基本 上 采取 的 策略 是 ， 发 挥 自己 天 才 般 的 计算 能 力 ， 通 
过 “容器 宽度 -水 平 padding- 水 平 nargin=?” 重 新 设 定 具体 的 宽度 。 


当然 


、 








于 是 ， 最 终 的 CSS 代 人 码 如 下 : 


.nav { 

width: 246px; 
} 
.nav-a { 

display: block; 


/* 260px = 246px - 16px*2 - 16px*2 */ 
width: 266pX; 

margin: 6 16px 

padding: 9px 16pX; 





典型 的 “ 砌 砖头 交 拱 积木 ? 式 思 维 方式 ! 虽然 说 最 后 的 效果 是 一 样 
的 ， 但 是 ， 如 果 模 块 的 党 度 变 化 了 ， 哪 怕 只 变 了 1 像素 ，width 也 需要 
重新 计算 一 届 。 但 是 ， 如 果 信 助 流动 性 无 宽度 布局 ， 那 么 哆 算 外 面容 器 
斥 十 变化， 我 们 的 导航 也 可 以 目 适 应 ， 这 就 是 充分 利用 浏览 器 原生 流 特 
性 的 好 处 。 


因此 ， 记 住 “ 无 宽度 "这 条 准则 ， 少 了 代码 ， 少 了 计算 ， 少 了 维护 ， 
何 乐 而 不 为 呢 ? 





你 应 该 还 记得 前 面 说 过 display:block 应 该 脑 补 
成 display:block-block， 这 是 我 自己 想 出 来 的 ， 便 于 大 家 理解 ， 
CSS 世 界 其 实 并 没有 这 样 的 说 法 。 虽 有 “ 腾 想 ”成 分 在 里 面 ， 但 其 实 也 是 
有 理 可 循 的 。 本 节 详 细 讲 了 块 级 元 素 的 流体 特性 ， 这 种 特性 就 是 体现 在 
里 面 的 “容器 盒子 "上 的 。 所 以 ， 在 CSS3 最 新 的 世界 中 ，CSS 规 范 的 撰写 
者 们 使 用 了 另外 一 个 名 词 来 表示 这 个 内 在 盒子 ， 就 是 “flow”， 也 就 是 本 
书 的 核心 “ 流 ”。 因 此 ，display:b1lock 更 规范 的 脑 补 应 该 
是 display:block flow。 注 意 中 间 是 空格 。 当 然 ， 由 于 规范 〈 和 草案 ) 
2015 年 10 月 才 发 布 ， 因 此 直到 2017 年 6 月 为 止 还 没有 浏览 器 支持 。 好 
了 ， 这 属于 比 CSS3 新 世界 还 要 新 的 世界 的 知识 点 ， 了 解 即 可 。 





(2) 格式 化 宽度 。 格 式 化 宽度 仅 出 现在 “绝对 定位 模型 "中 ， 也 就 
是 出 现在 position 属 性 值 为 absolute 或 fixed 的 元 素 中 。 在 默认 情况 
下 ， 绝 对 定位 元 素 的 宽度 表现 是 “ 包 衷 性 *， 宽 度 由 内 部 尺寸 决定 ， 但 
是 ， 有 一 种 情况 其 宽度 是 由 外 部 尺寸 决定 的 ， 是 什么 情况 呢 ? 








对 于 非 蔡 换 元 素 〈 见 本 书 第 4 章 ) ， 当 left/top 或 top/bottom 对 


立方 位 的 属性 值 同 时 存在 的 时 候 ， 元 素 的 宽度 表现 为 “格式 化 宽度 ”， 
宽度 大 小 相对 于 最 近 的 具有 定位 特性 epostion 由 位 外 二 bstie) 
的 祖先 元 素 计 算 。 


例如 ， 下 面 一 段 CSS 代 码 : 


div { position: absolute; left: 26px; right: 26px; } 





假设 该 cdiv> 元 素 最 近 的 具有 定位 特性 的 祖先 元 素 的 宽度 是 1000 像 素 ， 
则 这 个 <div> 元 素 的 宽度 是 960 〈 即 1000-20-20) 像素 。 








此 外 ， 和 上 面 的 普通 流 一 样 , “格式 化 宽度 ”具有 完全 的 流体 性 ， 也 
了 驶 是 margin、border、padding 和 content 内 容 区 域 同 样 会 目 动 分 配 
水 平和 垂直 ) 空间 。 








“格式 化 宽度 "水 很 深 ， 同 时 也 非常 实用 ， 这 里 先 简单 提 及 ， 更 多 内 
容 可 参见 本 书 第 6 章 与 position:absolute 相 关 的 内 容 。 


2. 内 部 尺寸 与 流体 特性 


上 一 节 讲 的 是 “外 部 尺寸 "， 本 节 就 讲 讲 “ 内 部 尺寸 "。 所 谓 “内 部 尺 
寸 "， 简 单 来 讲 就 是 元 素 的 尺寸 由 内 部 的 元 素 决 定 ， 而 非 由 外 部 的 容器 
决定 。 如 何 快速 判断 一 个 元 素 使 用 的 是 否 为 “内 部 尺寸 " 呢 ? 很 简单 ， 候 
如 这 个 元 素 里 面 没有 内 容 ， 宽 度 就 是 9， 那 就 是 应 用 的 “内 部 尺寸 











据 我 所 知 ， 在 CSS 世 界 中 ,“ 内 部 尺寸 "有 下 面 3 种 表现 形式 。 


(1) 包 于 性 。 


“ 包 庄 性 ?是 我 自己 对 “shrink-to-fit”" 理 解 后 的 一 种 称谓 ， 我 个 人 觉得 
非常 形象 好 记 ， 一 直 用 了 很 多 年 。“ 包 里 性 ”也 是 CSS 世 界 中 很 重要 的 流 
布局 表现 形式 。 





中 文 就 是 博大 精深 顾名思义,，“ 包 里 性 ”， 除 了 “ 包 里 *， 还 有 “ 自 
适应 性 *”。“ 自 适应 性 ”是 区 分 后 面 两 种 尺寸 表现 很 重要 的 一 点。 那么 这 
个 “ 自 适 应 性 ” 指 的 是 什么 呢 ? 

















所 谓 “ 自 适应 性 ”"， 指 的 是 元 素 尺寸 由 内 部 元 素 决定 ， 但 永远 小 
于 “包含 块 ” 容 器 的 尺寸 (除非 容器 尺寸 小 于 元 素 的 “首选 最 小 宽度 ”) 。 
换 句 话说 就 是 ,，“ 包 于 性 ”元 素 竖 景 中 有 个 max-width:166% 蛙 着 的 感觉 
(注意 ， 此 说 法 只 是 便于 大 家 理解 ， 实 际 上 是 有 明显 区 别 的 ) 。 

















因此 ， 对 于 一 个 元 素 ， 如 果 其 display 属 性 值 是 inline-block， 
那么 即使 其 里 面 内 容 再 多 ， 只 要 是 正常 文本 ， 宽 度 也 不 会 超过 容器 。 于 
是 ， 图 文 混 排 的 时 候 ， 我 们 只 要 关心 内 容 ， 除 非 * 首 选 最 小 宽度 ” 比 容器 
度 还 要 大 ， 否 则 我 们 完全 不 需要 担心 某 个 元 素 内 容 太 多 而 破坏 了 布 


宽 
局 5 








凡事 发 生 必 有 缘由 。CSS 世 界 的 造物 主 为 何 要 设计 “ 包 衷 性 ?这 个 东 
西 呢 ? 是 为 谁 设计 的 呢 ? 








反问 是 探究 知识 的 很 好 的 习惯 和 方式 。 要 回答 上 面 的 问题 ， 我 们 只 
要 请 一 个 肿 宾 出 来 ， 管 案 束 基本 差不多 了 。 下 面 我 们 就 请 出 重量 级 嘉宾 
一 一 坦 名 的 “按钮 元素。 没 错 ， 陨 是 默认 长 得 比较 丑 ， 样 式 定义 兼容 性 
又 不 好 的 按钮 元 素 。 














按钮 通常 以 如 下 两 种 形式 出 现在 页 面 代码 中 : 


<button> 按 钮 </button> 





<input type="button"” value=" 按 钮 "> 





按钮 就 是 CSS 世 界 中 极 具 代表 性 的 jnline-block 元 素 ， 可 请 展 
示 “ 包 器 性 ”最 好 的 例子 ， 具 体 表现 为 ， 按钮 文字 越 多 宽度 越 宽 〈 内 部 尺 
十 特性) ， 但 如 果 文 字 足 够 多 ， 则 会 在 容器 的 客 度 处 上 自动 换行 (和 目 适应 
特性 ) 。 











按钮 会 目 动 换行 ? 没 错 ， 你 之 所 以 没 印 象 ， 可 能 是 因为 : 





。 实际 项 目 中 ， 按 钮 上 的 文字 个 数 比较 有 限 ， 没 机 会 换行 ; 
。 “button> 标 签 按钮 才 会 自动 换行 ，<input> 标 签 按钮 ， 默 认 
white-space:pre， 是 不 会 换行 的 ， 需 要 将 pre 值 重 置 为 默认 的 


normal。 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/3/2-4.php 或 者 扫 下 面 的 
二 维 码 。 上 面 的 示例 页 面 的 效果 如 图 3-8 所 示 。 











按钮 

















文字 再 多 一 点 











按钮 文字 越 多 宽度 越 宽 ( 包 圳 ,内 部 及 可 
特性 )， 但 不 会 起 过 容 蓝 宽度 ( 自 适 应 
性 ) 








图 3-8 IE11 浏 览 器 IE8 模 式 下 按钮 换行 效果 








按钮 最 大 宽度 就 是 容器 的 240 像 系 ，1 像 素 不 多 1 像素 不 少 ， 顿 时 有 
了 一 种 内 外 兼 修 的 感觉。 


“ 包 庄 性 ”对 实际 开发 有 什么 作用 呢 ? 





请 看 这 个 需求 : 页 面 茶 个 模块 的 文字 内 容 是 动态 的 ， 可 能 是 几 个 
字 ， 也 可 能 是 一 句 话 。 然 后 ， 和 希望 文字 少 的 时 候 居 中 显示 ， 文 字 超 过 一 
行 的 时 候 拓 左 显 示 。 访 如何 实现 ? 


核心 CSS 代 码 如 下 : 


.box { 
text-align: center; 


} 

.Content { 
display: inline-block; 
text-align: left; 

} 





这 样 ， 文 字 少 的 时 候 ， 就 会 如 图 3-9 所 示 。 文 字 多 的 时 候 ， 如 图 3-10 
所 示 。 








图 3-9 ”文字 少时 的 显示 效果 


文字 内 容 -新 增 文 字 -新 增 文字 -新 增 


文字 -新 增 文字 





图 3-10 ”文字 多 时 的 显示 效果 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/3/2-5.php 或 者 扫 右 侧 的 
二 维 码 ， 进 入 页 面 点 击 “ 更 多 文字 ”按钮 体验 。 











除了 inline-block 元 素 ， 浮 动 元 素 以 及 绝对 定位 元 素 都 具有 包 理 
性 ， 均 有 类 似 的 智能 宽度 行为 。 


(2) 首选 最 小 宽度 。 





所 谓 “ 首 选 最 小 宽度 ”， 指 的 是 元 素 最 适合 的 最 小 宽度 。 我 们 接着 上 
面 的 例子 ， 在 上 面 例子 中 ， 外 部 容 右 的 宽度 是 240 像 素 ， 假 设 宽度 是 0， 
请 问 里 面 的 jnline-block 元 素 的 宽度 是 多 少 ? 




















是 0 吗 ? 不 是 。 在 CSS 世 界 中 ， 图 片 和 文字 的 权重 要 远大 于 布局 ， 
因此 ，CSS 的 设计 者 显然 是 不 会 让 图 文 在 width:auto 时 宽度 变 成 0 的 ， 
此 时 所 表现 的 冤 度 束 是 “首选 最 小 宽度 ”"。 具 体 表现 规则 如 下 。 














。 东亚 文字 《如 中 文 ) 最 小 蜗 度 为 每 个 汉字 的 宽度 ， 如 图 3-11 所 示 的 
14。 











图 3-11 ”中 文 汉字 与 最 小 宽度 效果 


92.78x49 


display:injine- 
block 





图 3-12 ”连续 字符 换行 点 示意 





。 西方 文字 最 小 宽度 由 特定 的 连续 的 英文 字符 单元 决定 。 并 不 是 所 有 
的 英文 字符 都 会 组 成 连续 单元 ， 一 般 会 终止 于 空格 〈 普 通 空格 ) 、 
短 横 线 、 问 号 以 及 其 他 非 英文 字符 等 。 例 如 ，“display:inline- 
block” 这 几 个 字符 以 连接 符 “- ”作为 分 陋 符 ， 形 成 
了 “display:inline” 和 “block” 两 个 连续 单元 ， 由 于 连接 符 “-” 分 
阳 位 置 在 字符 后 面 ， 因 此 ， 最 后 的 宽度 就 是 “display:inline-” 的 
宽度 ， 如 图 3-12 所 示 。 





如 果 想 让 英文 字符 和 中 文 一 样 ， 每 一 个 字符 都 用 最 小 宽度 单元 ， 可 
以 试 试 使 用 CSS 中 的 word-break:break-all。 








。 类 似 图 片 这 样 的 痊 换 元 系 的 最 小 宽度 束 是 该 元 系 内 容 本 号 的 宽度 。 





“首选 最 小 宽度 "对 我 们 实际 开 及 有 什么 作用 呢 ? 


可 以 让 我 们 遇 到 类 似 现象 的 时 候 知 道 原 因 是 什么 ， 方 便 迅 速 对 症 下 
药 ， 其 他 就 没什么 用 了 。 





有 点 失望 ? 那 好 ， 我 束 举 个 利用 “首选 最 小 客 度 ”构建 图 形 的 例子 
吧 。 请 问 ， 如 何 使 用 一 层 HTML 标 签 分 别 实现 图 3-13 所 示 
的 “四 ”和 “ 凸 ” 效 果 注意 要 兼容 IE8) ? 








由 于 要 兼容 IE8，CSS 新 世界 中 图 形 构建 利器 的 盒 阴影 和 背景 渐变 
全 都 没有 用 武之 地 ， 怎 么 办 呢 ? 我 们 可 以 利用 “首选 最 小 宽度 ”的 行为 特 
点 把 需要 的 图 形 勾 勒 出 来 。 核 心 CSS 代 码 如 下 《以 “四 ”效果 示意 ) : 
.ao { 


display: inline-block; 
width: 8; 


} 


.ao:before { 
content: "love 你 love"; 
outline: 2px solid #cd66060; 
color: #fff; 


} 





还 没 看 明白 ? 那 我 把 文字 颜色 放出 来 〈 见 图 3-14) ， 大 家 应 该 束 知 


道 实 现 原理 了 。 


图 3-13 “需要 实现 的 效果 图 


区 中 


图 3-14 ”图 形 由 文字 区 域 勾勒 而 成 
































利用 连续 英文 单词 不 换行 的 特性 ， 我 们 就 可 以 控制 什么 地 方 “ 凹 ”， 
什么 地 方 “ 吓 ?图 ! 


想 看 在 线 演示 ， 请 手动 输入 http://demo.cssworld.cn/3/2-6.php 或 者 扫 
右 侧 的 二 维 码 。 





(3) 最 大 宽度 。 





最 大 宽度 就 是 元 素 可 以 有 的 最 大 宽度 。 我 自己 是 这 么 理解 的 ,，“ 最 
宽度 ”实际 等 同 于 “包裹 性 ”元 素 设置 white-space:nowrap 声 明 后 的 











宽度 。 如 果 内 部 没有 块 级 元 素 或 者 块 级 元 系 没有 设 定 宽度 值 ， 则 “最 大 
宽度 ”实际 上 是 最 大 的 连续 内 联 盒子 的 宽度 。 


什么 是 连续 内 联 盒子 ?“ 内 联 盒子 ”的 内 容 会 在 3.4 节 深入 讲解 ， 这 里 
你 就 简单 地 将 其 理解 为 display 为 inline、inline-block、inline-table 等 
元 素 。“ 连 续 内 联 盒子 ? 指 的 全 部 都 是 内 联 级 别 的 一 个 或 一 堆 元 素 ， 中 间 
没有 任何 的 换行 标签 cbr> 或 其 他 块 级 元 素 。 


一 图 胜 千 言 ， 图 3-15 所 示 是 一 段 很 平常 的 HTML 片段 的 “连续 内 联合 
子 ” 信 息 标 注 图 。 其 中 ， 有 3 处 连续 内 联 盒子 ， 分 别 是 : 


<br> 前 面 的 4 个 内 联 盒子 组 合 ; 
<br> 后 面 “ 我 是 下 一 行 * 字 样 所 在 的 匿名 内 联 盒子 ; 
最 后 块 状 <p> 标 签 内 的 内 联 盒子 ， 也 就 是 一 段 文 本 。 











， 内 联 ” 文 字 对 应 的 标注 相 一 致 ， 此 时 “最 大 宽度 ”就 是 这 3 
续 内 联 盒子 的 宽度 的 最 大 值 。 








如 果 把 标注 图 的 代码 在 浏览 器 中 运行 一 下 ， 则 在 最 大 宽度 模式 下 ， 
效果 如 图 3-16 所 示 。 可 以 发 现 最 后 的 宽度 就 是 第 一 个 “连续 内 联 盒子 ”的 
宽度 。 

内 联 一 
我 是 文本 ” 
由 联 一 一 > “span> 我 在 ijnline 标 签 内 </span 
内 联 ~ 一 之 “button> 我 下 按钮 </button> 
内 联 —— > ‘img src= Shuai.png” alt= 我 是 图 三 
本 
Do 一 一 “我 后 一行” [一 玉 内 联 
> 一 :pp 我 是 一 段 描述 </p 机 
块 a /div 


图 3-15 “连续 内 联 盒子 ”信息 标注 图 





图 3-16 最 大 宽度 模式 下 的 效果 


“最 大 宽度 ”对 我 们 实际 开发 有 什么 作用 呢 ? 


根据 我 这 么 多 年 的 经 验 ， 大 部 分 需要 使 用 “最 大 宽度 ”的 场景 都 可 以 
通过 设置 一 个 “很 大 宽度 ”来 实现 。 注 意 ， 这 里 的 “很 大 宽度 ”和 “最 大 宽 
度 ” 是 有 本 质 区 别 的 。 比 方 说 ， 有 5 张 图 片 ， 每 张 图 片 宽度 200 像 素 ， 假 
设 图 片 元 素 紧 密 排列 ， 则 “最 大 宽度 ”就 是 1000 像 素 。 但 是 ， 实 际 开发 的 
时 候 ， 我 们 懒得 计算 ， 可 能 直接 设置 容器 width:2666px， 这 里 2666px 
就 是 “很 大 宽度 ”， 宽 度 足 够 大 ， 作 用 是 保证 图 片 不 会 因为 容器 宽度 不 足 
而 不 在 一 行内 显示 。 两 者 都 能 实现 几 张 图 片 左 右 滑 来 滑 去 的 效果 。 





























那 有 没有 场景 只 能 是 “最 大 宽度 ”而 不 是 “很 大 宽度 ” 昵 ? 有 上 ! 不 知 大 
家 有 没有 听 过 iScroll， 它 可 以 实现 非常 平滑 的 深 动 效果 ， 在 前 端 界 顺 有 


名 气 。 





一 般 来 讲 ， 实 现 自 定义 深 动 有 两 种 原理 : 一 种 借助 原生 的 滚 
动 ，scrollLeft/scrollTop 值 变化 ， 它 的 优点 是 简单 ， 不 足 是 效果 采 
板 : 另 一 种 是 根据 内 部 元 素 的 尺寸 和 容器 的 关系 ， 通 过 修改 内 部 元 素 的 
位 置 实现 滚动 效果 ， 优 点 是 效果 可 以 很 绽放 。igScrol 就 是 使 用 的 后 者 ， 
因此 ， 如 果 我 们 希望 使 用 iScrol 模 拟 水 平 滚动 ， 只 能 是 使 用 “最 大 帘 





度 "， 这 样 ， 滚 动 到 撒 的 时 候 才 是 真 的 到 确 。 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/3/2-7.php 或 者 扫 下 面 的 
二 维 码 。 保 证 在 一 行 显示 ， 同 时 不 浪 绩 一 点 空白 ， 如 图 3-17 所 示 。 








光 动 到 最 后 


图 3-17 ”最 大 宽度 与 精确 滚动 示意 





3.2.2 ”width 值 作用 的 细节 


细心 的 读者 有 没有 发 现 ， 前 面 那 么 多 页 ， 其 实 就 讲 了 一 个 点 
一 width:auto， 说 “ 深 藏 不 露 * 不 是 忽悠 你 们 吧 ? 下 面 ， 转 换 思 维 ， 
我 们 来 看 一 下 width 属性 使 用 具体 数值 会 有 怎样 的 表现 。 








比方 说 ， 对 于 一 个 <div> 元 素 ， 我 们 设 定 其 宽度 为 .8688px， 如 下 : 


div { width: 166px; } 


请 问 ，166px 的 宽度 是 如 何 作用 到 这 个 <div> 元 素 上 的 ? 





要 回答 这 个 问题 ， 就 需要 了 解 CSS 世 界 中 与 尺寸 相关 的 一 个 重要 概 


“ 盒 尺 寸 ”(box dimension ) 。 





全 
人 


前 文 多 次 强调 了 ，width 是 作用 在 “内 在 盒子 "上 的 ， 乍 一 看 是 一 个 
普通 的 盒子 ， 实 际 上 ， 这 个 “内 在 盒子 ? 古 由 很 多 部 分 构成 的 。 这 个 盒子 
的 构成 和 地 球 结构 的 构成 惊人 地 类 似 ， 可 参考 图 3-18 所 示 的 这 张 我 制作 
的 示意 图 (图 中 虚线 、 实 线 是 为 了 区 分 不 同 结构 ， 本 里 并 没有 意义 )〉。 











CSS 盒 尺寸 区 域 地 球 构 造 区 域 


margin ( 透明 ) 
border 


padding 


| 1 
| 1 
| 1 
| 1 
| 1 
| I 
| 1 
| 1 
| | 
1 

1 content . 
| 1 
| 1 
| 1 
| 1 
| 1 
| 1 
| 1 
| I 
| 1 
l 1 





图 3-18 ” 盒 尺 寸 盒 子 结构 和 地 球 结构 对 比 图 





仔细 对 比 会 发 现 ， 两 者 不 仅 结 构 类 似 ， 对 应 结构 的 视觉 表现 和 含义 
也 类 似 。 比 方 说 ，CSS 的 margin 区 域 和 地 球 的 大 气 层 区 域 都 是 透明 的 ， 
又 比方 说 content 之 于 CSS， 正 如 地 核 之 于 地 球 ， 都 是 属于 核心 ， 因 为 
CSS 世 界 的 诞生 就 是 为 图 文 信息 展示 服务 的 ， 因 此 ， 内 容 一 定 是 最 重要 
的 核心 。 然 后 在 这 个 核心 的 外 面包 里 了 padding、border 和 margin。 





CSS 世 界 什么 最 多 ? 盒子 ! 比方 前 面 介绍 过 的 块 状 盒子 、 内 联 盒子 
以 及 外 在 盒子 和 内 在 盒子 ， 以 及 这 里 即将 出 现 的 4 个 盒子 ， 以 及 3.4 介 
绍 的 一 堆 盒 子 。 如 果 这 些 盒子 纯粹 是 概念 ， 没 什么 实际 作用 ， 我 就 不 讲 
或 直接 一 步 珊 过 ， 但 是 ， 这 里 的 这 4 个 盒子 不 仅仅 是 概念 ， 还 真 的 有 付 
诸 实践 的 关键 字 ， 上 所 以 还 是 要 好 好 说 一 说 。 


我 们 的 这 个 “内 在 盒子 ”又 被 分 成 了 4 个 盒子 ， 分 别 是 content box、 


padding box、border box 和 margin box。 


原本 这 几 个 盒子 只 存在 于 规范 中 ， 我 们 写 代 码 的 知 不 知道 无 所 谓 
的 ， 都 能 写 出 很 棒 的 CSS 代 码 ， 这 就 和 玩 游 戏 没 必 要 知道 游戏 怎么 制作 
的 道理 一 样 。 但 是 后 来 ， 这 几 个 盒子 在 CSS 语 言 层 有 名 字 了 ， 一 下 子 变 
成 有 号 份 的 人 了 ， 事 情 就 变 了 ， 如 有 果 对 这 些 盒子 不 了 解 ， 有 些 CSS 属 性 
就 不 好 理解 ， 也 不 容易 记 住 。 








那么 都 给 它们 起 了 些 什 么 名 字 呢 ? content box 写作 content- 
box，padding box 写作 padding-box，border box 写 作 border-box， 
margin box 写 作 .… 突 然 发 现 ，margin box 居 然 没有 名 字 ! 为 何 唯 独 
margin box 并 没有 对 应 的 CSS 关 键 字 名 称 呢 ? 因为 目前 没有 任何 场景 








需要 用 到 margin box。 


“margin 的 背景 永远 是 透明 的 ”， 因 此 不 可 能 作为 backgound-clip 
或 background-origin 属 性 值 出 现 。margin 一 旦 设 定 具体 宽度 和 高 度 
值 ， 其 本 身 的 尺寸 是 不 会 因 margin 值 变化 而 变化 的 ， 因 此 作为 box- 
sizing 的 属性 值 存 在 也 就 没有 了 意义 〈 这 会 在 后 面 深入 阐述 ) 。 既 然 
无 用 武之 地 ， 上 自然 就 被 抛弃 了 。 








现在 回 到 一 开始 的 问题 : width :1686px 是 如 何 作用 到 <div> 元 素 上 
的 ? 


在 CSS2.1 的 规范 中 ， 有 一 上 段 非 常 露 骨 的 描述 : content box 环 绕 
着 width 和 height 给 定 的 矩形 。 


说 得 这 么 直 白 ， 我 已 经 没什么 其 他 可 说 的 了 。 明 摆 
着 ，width:166px 作 用 在 了 content box 上 ， 由 于 <div> 元 素 默认 的 
padding、border 和 margin 都 是 89， 因此 ， 该 <div> 所 呈现 的 宽度 就 是 
100 像 系 。 


那么 按照 这 种 说 法 ， 如 果 我 们 在 水 平方 同 给 定 padding 和 border 大 
小 ， 则 元 素 的 尺寸 就 不 是 100 像 素 了 ? 我 们 看 一 个 简单 的 例子 : 


div { width: 166px; padding: 26px; border: 26px solid; } 





手动 输入 http://demo.cssworld.cn/3/2-8.php 或 者 扫 下 面 的 二 维 码 。 结 
末 变 成 了 180 像 素 宽 ， 如 图 3-19 所 示 。 


此 时 元 素 的 
offsetWidth 
是 : 180 





图 3-19 ”默认 盒 尺 寸 下 的 offsetWidth 








为 什么 会 变 宽 呢 ? 其 实 很 好 理解 ， 因 为 宽度 是 作用 在 content box 上 
的 ， 而 外 面 围绕 的 padding box 和 border box 又 不 是 摆设 ， 自 然 实 际 尺 寸 
要 比 设 定 的 大 。 这 就 好 比 某 超 模 的 腰围 61 cm， 庄 了 件 东北 大 棉 只 ， 自 
然 此 时 的 腰围 要 远大 于 61 cm。 如 图 3-20 所 示 ， 中 间 有 点 蓝 的 就 
是 content 区 域 ， 宽 度 100 像 系 ， 再 加 上 padding 和 border 左 右 各 20 像 
素 ， 最 终 宽 度 就 是 180 像 素 啦 ! 








图 3-20 180 像素 宽度 的 盒 模 型 


如 有 果 单 看 定义 和 表现 ， 似 乎 一 切 都 合情合理 ， 但 实际 上 ， 多 年 的 实 
践 告 诉 我 ， 有 时 候 ， 这 种 宽度 设 定 和 表现 并 不 合理 。 我 总 结 为 以 下 两 
所 。 











(1) 流动 性 丢失 。 


对 于 块 状元 素 ， 如 果 width:auto， 则 元 素 会 如 水 流 般 充 满 整 个 容 
器 ， 而 一 旦 设 定 了 width 有 具体 数值 ， 则 元 素 的 流动 性 就 会 被 阻 断 ， 因 为 
元 素 给 定 宽 度 就 像 河流 中 间 竖 了 两 个 大 闸 一 样 ， 就 没有 了 流动 性 。 尤 其 
宽度 作用 在 content box 上 ， 更 是 内 外 流动 性 全 无 ， 如 图 3-21 所 示 。 


这 世界 上 任何 事物 ， 一 旦 限 死 了 ， 束 形 失 了 灵活 性 ， 其 发展 潜力 及 
作用 范围 融会 大 大 受 限 。 


长 江 为 何 生 机 过 勃 数 干 年 ， 就 是 因为 滔滔 江水 ， 奔 流 不 县 。CSS 的 
流动 性 也 是 其 生机 壬 勃 之 本 ， 如 果 直 接 宽度 设 死 ， 流 动 性 丢失 ， 在 我 看 
来 ， 就 是 江河 变 死水 ， 手 机 变 板 砖 。 这 就 是 我 提出 “无 宽度 准则 ”的 原因 
一 一 布局 会 更 灵活 ， 容 错 性 会 更 强 。 





width:auto: width:100px.; 


Co (oo 


图 3-21 流动 性 缺失 示意 图 








鉴于 “流动 性 丢失 ”在 3.2.1 节 其 实 已 经 提 过 ， 还 有 实例 ， 这 里 就 不 再 
过 多 展开 。 


(2) 与 现实 世界 表现 不 一 致 的 困扰 。 


包含 padding 或 border 会 让 元 系 锅 度 变 大 的 这 种 CSS 表 现 往往 会 让 
CSS 使 用 者 困惑 : 我 设置 宽度 为 100 像 素 ， 其 实 是 希望 整个 最 终 的 宽度 
是 100 像 素 ， 这 样 才 符 合 现 实 理 解 嘛 。 比 方 说 ， 我 买 个 140m“ 的 房子 ， 肯 
定 是 连 墙 体面 积 在 内 的 啊 ， 实 际 使 用 面积 比 140m“ 小 才 是 现实 ， 你 说 现 
在 最 终 面 积 比 140m“ 还 大 ， 这 种 事情 显然 是 不 科学 不 合理 的 。 








或 许 是 因为 CSS 2.1 是 面 癌 内 容 〈 图 文 信息 ) 设计 的 ， 所 以 ，width 
设计 成 了 直接 作用 在 content box 上 。 


这 对 一 些 CSS 新 手 的 布局 造成 了 一 定 的 障碍 ， 因 为 这 些 CSS 从 业者 
眼中 的 CSS 结 构 是 砖 块 ， 而 不 是 水 流 。 因 此 ， 布 局 讲求 尺寸 精确 计算 。 
这 就 导致 在 一 些 CSS 属 性 值 发 生变 化 的 时 候 〈 如 padding 值 变 大 ， 元 素 
尺寸 也 变 大 ) ， 空 间 不 足 ， 出 现 页 面 布局 错位 的 问题 。 





那 有 没有 什么 办 法 能 避免 这 种 错位 问题 的 出 现 呢 ?方法 之 一 就 是 采 
用 书写 方式 约束 ， 如 使 用 “宽度 分 离 原 则 ”。 





3.2.3 CSS 流体 布局 下 的 宽度 分 离 原 则 


所 谓 “ 宽 度 分 离 原则 ”， 就 是 CSS 中 的 width 属性 不 与 影响 宽度 的 
padding/border (有 时 候 包 括 margin) 属性 共存 ， 也 就 是 不 能 出 现 以 
下 的 组 合 : 

或 者 


有 人 可 能 会 问 : 不 这 么 写 ， 该 怎么 写 呢 ? 很 简单 ， 分 离 ，width 独 
立 占用 一 层 标签 ， 而 padding、border、margin 利 用 流动 性 在 机 而 寺 拓 
应 呈现 。 





.father { 
width: 186pX; 


.Son { 


margin: 6 28px; 
padding: 28px; 
border: 1px solid; 





现在 关键 问题 来 了 : 为 何 要 宽度 分 离 ? 
1. 为 何 要 宽度 分 离 





在 前 端 领域 ， 一 提 到 分 离 ， 作 用 一 定 是 便于 维护 。 比 方 说 ， 样 式 和 


行为 分 离 、 前 后 端 分 离 或 者 这 里 的 “宽度 分 离 ”。 





人 - 件 事情 en 
候 ， 这 个 事情 最 终 的 Ne 宽度 在 这 里 也 是 
似 ， wa 盒子 都 能 影响 宽度 ， ， 而 元素 的 最 终 宽 度 
就 很 容易 发 生变 化 而 导致 意 想 不 到 的 布局 发 生 。 例 如 ， 下 面 这 个 简单 的 
CSS: 











.box { 
width: 166px; 


border: 1px solid; 





} 


此 时 宽度 是 102 像 素 。 然 后 ， 设 计 师 希望 元 素 边 框 内 有 20 像 素 的 留 白 ， 
这 时 候 ， 我 们 会 增加 padding 设 置 : 


.box { 
width: 166pX; 
padding: 28px; 
border: 1px solid; 








结果 此 时 宽度 变 成 了 142 像 素 ， 大 了 40 像 素 ， ss 显 
然 布局 很 容易 出 问题 。 为 了 不 影响 之 前 的 布局 ， 我 们 还 需 过 计算 减 
去 40 像 素 的 padding 大 小 才 行 : 











.box { 
width: 66pX; // 通过 计算 ， 减 去 46 像 素 





padding: 28px; 
border: 1px solid; 


} 








但 是 ， 如 果 我 们 使 用 了 宽度 分 离 ， 事 情 束 会 轻松 很 多 : 





.father { 
width: 162pX; 
} 


.Son { 
border: 1px solid; 


} 





肉 套 一 层 标 签 ， 父 元 素 定 宽 ， 子 元 素 因 为 width 使 用 的 是 默认 
值 auto， 所 以 会 如 水 流 般 自动 填 满 父 级 容器 。 因 此 ， 子 元 素 的 content 
box 宽 度 就 是 100 像 素 ， 和 上 面 直接 设置 width 为 100 像 素 表现 一 样 。 


然后 ， 同 样 的 故事 ， 设 计 师 希 望 元 系 边 框 内 有 20 像 素 的 留 白 ， 这 时 
候 ， 我 们 会 增加 padding 设 置 : 
.father { 


width: 162pX; 
} 


.Son { 
border: 1px solid; 
padding: 28px; 

} 








然后 ..….... 就 没有 然后 了 ， 和 宽度 还 是 102 像 素 ， 子 元 素 的 content box 自 
动 变 成 了 60 像 素 ， 和 上 面 反 例 的 表现 一 样 。 没 错 ， 自 动 变化 了 ， 就 是 这 


么 智能 ! 


虽然 表现 一 样 ， 但 是 写 代码 的 人 的 体验 却 大 不 一 样 : width、 
padding、border 混 用 的 时 候 ， 任 何 修改 我 们 都 需要 实时 去 计算 现 
在 width 应 该 设置 多 大 才能 和 之 前 的 占用 的 宽度 一 样 ， 而 后 面 width 分 
离 的 实现 ， 我 们 没有 任何 计算 ， 要 padding 留 白 ， 加 一 下 就 好 ， 要 修改 
边框 宽度 ， 改 一 下 就 好 ， 浏 览 器 会 自动 计算 ， 完 全 不 用 担心 尺寸 的 变 
化 。 








也 惑 是 说 ， 使 用 “宽度 分 离 ” 后 ， 咱 们 不 需要 伐 脑 子 去 计算 了 ， 而 且 
页 面 结构 反 而 更 稳固 。 这 么 好 的 事情 ， 完 全 没有 理由 拒绝 啊 ! 


2. 可 能 的 挑战 





有 人 可 能 会 提出 挑战 ， 你 这 “宽度 分 离 ” 多 使 用 了 一 层 标签 啊 ， 这 
HTML 成 本 也 是 成 本 啊 ! 








没 错 ， 问 题 本 身 是 对 的 。HTML 的 成 本 也 是 成 本 ， 过 深 的 垦 套 是 会 
增加 页 面 泻 染 和 维护 成 本 的 。 但 是 ， 我 这 里 要 抛 出 一 句 话 ， 实 际 上 ， 如 
果 不 考虑 蔡 换 元 素 ， 这 世界 上 绝 大 多 数 的 网 页 ， 只 需要 一 个 width 设 定 
就 可 以 了 ， 没 错 ， 只 需要 一 个 width， 就 是 最 外 层 限制 网 页 主体 内 容 宽 
度 的 那个 width， 而 里 面 所 有 元 系 都 没有 理由 再 出 现 width 设 置 。 所 
以 ，“ 宽 度 分 离 ” 虽 然 多 了 一 层 标签 ， 但 最 终 也 就 多 了 一 层 标签 而 已 ， 这 
个 成 本 跟 收益 比 起 来 简直 就 是 毛毛 雨 。 














但 是 ， 话 又 说 回来 ,“ 无 宽度 ”网 页 布局 是 需要 很 深 的 CSS 积 系 才 能 
等 驶 自如 的 ， 很 多 同行 没 好 好 品 鉴 本 书 的 内 容 ， 要 是 让 他 们 完全 遵 
人 循 “ 冤 度 分 离 ” 来 实现 ， 怕 是 HTML 会 变 得 很 虽 唆 。 











那 有 没有 什么 既 无 须 计 算 ， 又 无 须 额 外 内 套 标签 的 实现 呢 ? 有 ， 那 
就 是 可 以 改变 width 作用 细节 的 box-sizing 属 性 。 


3.2.4 改变 width/height 作 用 细节 的 box-sizing 


box-sizing 虽 然 是 CSS3 属 性 ， 但 是 ， 让 人 受 宠 知 恢 的 是 下 8 浏览 
器 也 是 支持 它 的 ， 不 过 需要 加 -ms- 私 有 前 级 ， 但 IE9 浏 览 器 开始 就 不 需 
要 私有 前 级 了 。 


本 书 内 容 是 针对 IE8 及 以 上 版 本 浏览 器 的 ， 因 此 ，box-sizing 也 加 
入 了 CSS 世 界 魔法 师 的 队伍 。 


1. box-sizing 的 作用 


box-sizing 顾 名 思 义 就 是 “ 合 尺 寸 "。 稍 等 ， 前 文 好 像 也 出 现 了 一 
个 “使 尺 寸 ”(box dimension) ， 喷 ? 两 者 是 一 样 的 吗 ? 我 个 人 觉得 是 一 
样 的 ， 只 是 dimension 这 个 词 太 过 于 官方 了 ， 用 在 规范 中 很 合适 ， 但 是 ， 
要 是 作为 CSS 属 性 ， 拼 写 就 不 那么 容易 了 ， 上 所 以 驶 使 用 了 更 口语 化 的 


box-sizing。 


虽然 box-sizing 被 直译 为 “会 尺寸 "， 实 际 上 ， 其 更 准确 的 叫 法 应 
该 是 “ 盒 尺 寸 的 作用 细节 ”， 或 者 说 得 更 通俗 一 点 ， 叫 “width 作用 的 细 
节 ”， 也 就 是 说 ，box-sizing 属 性 的 作用 是 改变 width 的 作用 细节 。 


那 它 改变 了 什么 细节 了 呢 ? 一 句 话 ， 改 变 了 width 作用 的 盒子 。 还 记 
不 记得 “内 在 盒子 ”的 4 个 盒子 ? 它们 分 别 是 content box、padding box、 
border box 和 margin box。 默 认 情 况 下 ，width 是 作用 在 content box 上 
的 ，box-sizing 的 作用 就 是 可 以 把 width 作用 的 盒子 变 成 其 他 几 个 ， 
因此 ， 理 论 上 ，box-sizing 可 以 有 下 面 这 些 写法 : 


.box1 { box-sizing: content-box; } 
.box2 { box-sizing: padding-box; } 


.box3 { box-sizing: border-box; } 
.box4 { box-sizing: margin-box; } 





理论 美好 ， 现 实 残 酷 。 实 际 上 ， 支 持 情 况 如 下 : 








.box1 { box-sizing: content-box; } /* 默认 值 */ 
.box2 { box-sizing: padding-box; } /* Firefox 曾 经 支持 */ 
.box3 { box-sizing: border-box; } /* 全 线 支 持 */ 





.box4 { box-sizing: margin-box; } /* 从 未 支持 过 */ 





所 以 ， 我 只 能 拿 border-box 属 性 值 做 对 比 ， 如 图 3-22 所 示 。 


box-sizing: content-box; box-sizing: border-box; 


上 -一 100px 一 一 上 -一 100px 一 





T 下 


padding border padding border 























图 3-22 box-sizing 不 同 值 的 作用 原理 示意 


可 以 看 到 ， 所 谓 box-sizing:border-box 就 是 让 100 像 素 的 宽度 直 
接 作 用 在 border box 上 ， 从 默认 的 content box 变 成 border box。 此 时 ， 
content box 从 宽度 值 中 释放 ， 形 成 了 局 部 的 流动 性 ， 和 padding 一 起 自 
动 分 配 width 值 。 于 是 ， 


.box { 
width: 166pX; 


box-sizing: border-box; 





宽度 是 100 像 素 ， 


.box { 
width: 166px; 
box-sizing: border-box; 


border: 1px solid; 





宽度 也 是 100 像 素 ， 


.box { 


width: 166pX; 
box-sizing: border-box 
padding: 28px; 

border: 1px solid; 





宽度 还 是 100 像 素 。 


我 们 似乎 找到 了 解决 问题 的 钥 是 ， 自 从 用 了 box-sizing， 标 签 层 
级 少 了 ， 错 位 问题 不 见 了 ， 一 口气 写 5 张 页 面 ， 不 费劲。 








实际 上 ， 妆 壮 过 类 似 图 3-23 所 示 的 布局 时 ， 你 会 发 现 ，box- 
sizing 也 是 捉襟见肘 ， 因 为 边框 外 的 间距 只 能 是 margin， 但 box- 
sizing 并 不 文 持 margin-box， 知 想 用 一 层 标签 实现 ， 还 是 需要 计算 ! 





图 3-23 ”box-sizing 也 无 能 为 力 的 布局 结构 


2. 为 何 pox-sizing 不 文 持 margin-box 





遇 到 这 样 的 场景 的 时 候 ， 想 必 有 人 会 感叹 : “要 是 box-sizing 支 
持 margin-box 就 好 了 。? 是 啊 ， 要 是 这 样 就 好 了 ， 但 是 现实 就 是 不 文 
持 ， 为 什么 呢 ? 














网 上 有 这 样 的 说 法 ， 说 margin 在 垂直 方向 有 合并 重 堆 特性 ， 如 果 
文 持 了 margin-box， 合 并 规则 就 要 发 生变 更 ， 会 比较 复杂 。 我 对 此 观 
点 不 敢 苟 同 ， 其 实 当下 很 多 属性 可 以 灭 掉 margin 合 并 ， 多 一 个 box- 
sizing 义 何妨 ， 且 浏览 器 厂商 实现 起 来 并 不 难 ， 跟 之 前 的 规范 也 不 冲 


Pw 


人 
O 








我 个 人 认为 ， 不 支持 margin-box 最 大 的 原因 是 它 本 身 就 没有 价 
值 ! 我 们 不 妨 好 好 想 想 ， 一 个 元 素 ， 如 果 我 们 使 用 width 或 height 设 定 
好 了 尺寸 ， 请 问 ， 我 们 此 时 设置 margin 值 ， 其 offset 尺 寸 会 有 变化 
吗 ? 不 会 啊 ，100 像 素 宽 的 元 素 ， 再 怎么 设置 margin， 它 还 是 100 像 素 
宽 。 但 是 ，border 和 padding 束 不 一 样 了 ，100 像 素 宽 的 元 素 ， 设 置 个 
20 像 素 大 小 的 padding 值 ，offsetwidth 就 是 140 像 素 了 ， 尺 寸 会 变 
化 。 你 说 ， 一 个 本 身 并 不 会 改变 元 素 尺 寸 的 盒子 ， 它 有 让 box-sizing 
支持 的 道理 吗 ? box-sizing 就 是 改变 尺寸 作用 规则 的 ! margin 只 有 
在 width 为 auto 的 时 候 可 以 改变 元 素 的 尺寸 ， 但是， 此 时 元 素 已 经 处 于 
流动 性 状态 ， 根 本 就 不 需要 box-sizing。 所 以 ， 说 来 说 去 就 
是 margin-box 本 喘 就 没有 价值 。 














另外 一 个 原因 牵扯 到 语义 。 如 果 box-sizing 开 了 先河 文 持 了 
margin-box，margin box 就 变 成 了 一 个 “ 显 式 的 盒子 ”， 你 让 
background-origin 等 属性 何去何从 ， 文 持 还 是 不 文 持 呢 ? “margin 的 
背景 永远 是 透明 的 ”这 几 个 大 字 可 是 在 规范 写 得 清 清楚 楚 ， 难 道 让 背景 
色 在 所 谓 的 margin box 中 也 显示 ? 显然 是 不 可 能 的 ， 我 们 可 以 打 自 己 的 
脸 ， 但 是 要 想 让 规范 打上 自己 的 脸 ， 可 能 吗 ? 














最 后 还 有 一 个 可 能 的 原因 就 是 使 用 场景 需要 。 对 于 box-sizing 的 





margin-box 效 果 ， 如 果 是 了 下 10 及 以 上 版 本 浏览 器 ， 可 以 试 斌 flex 布局， 
如 末 要 兼容 IE8 及 以 上 版 本 可 以 使 用 “宽度 分 离 ”， 或 者 特定 场景 下 使 

用 “格式 化 宽度 ”来 实现 ， 也 就 是 并 不 是 强 需求 。 比 方 box- 
sizing:padding-box， 就 是 因为 使 用 场景 有 限 ， 仅 Firefox 浏 览 峰 文 
持 ， 并 且 是 曾经 支持 ， 从 版 本 50 开 始 也 不 支持 了 。 其 实 ， 我 个 人 觉得 没 
必要 人 舍弃， 浏览 器 都 应 该 支持 ， 就 像 bDackground 属 性 那样 。 成 为 套餐 
不 挺 好 的 ? 











人 们 写 代码 时 的 思维 逻辑 ， 总 是 不 由 自主 地 与 现实 世界 相映 射 ， 这 
是 人 之 常情 。 因 此 ， 大 家 对 box-sizing:border-box 的 好 感度 普遍 要 
远大 于 默认 的 box-sizing:content-box， 甚 至 我 见 到 有 同行 称 默认 的 
content-box 作 用 机 制 是 反 人 类 的 ， 因 此 ， 很 多 同行 开始 使 用 *{box- 
sizing:border-box} 进 行 全 局 重 置 ， 对 于 这 种 做 法 ， 我 是 有 上 自己 的 看 
法 的 。 








3. 如 何 评价 *{box-sizing:border-box} 


从 纯 个 人 角度 讲 ， 我 是 不 喜欢 这 种 做 法 的 ， 我 一 癌 推 革 的 是 充分 利 
用 元 素 本 身 的 特性 来 实现 我 们 想 要 的 效果 ， 足 够 简单 纯粹 。 因 此 ， 全 局 
重 置 的 做 法 是 有 悖 我 的 理念 的 。 


即使 抛 开 个 人 喜好 ， 这 种 做 法 也 是 有 些 问 题 的 。 


(1) 这 种 做 法 易 产 生 没 必要 的 消耗 。 通 配 符 应 该 是 一 个 慎 用 的 选 
择 器 ， 因 为 它 会 选择 所 有 的 标签 元 系 。 对 于 普通 内 联 元 素 〈 非 图 片 等 符 
换 元 素 ) ，box-sizing 无 论 是 什么 值 ， 对 其 泻 染 表现 都 没有 影响 ， 
此 ， 对 这 些 元 系 而 言 就 是 没有 必要 的 消耗 ， 同 时 有 些 元 素 ， 如 search 











类 型 的 搜索 框 ， 其 默认 的 box-sizing 就 是 border-box〈 如 果 浏 览 器 支 
持 ) ， 因 此 ，* 对 search 类 型 的 <input> 而 言 也 是 没有 必要 的 消耗 。 





(2) 这 种 做 法 并 不 能 解决 所 有 问题 。box-sizing 不 支持 margin- 
box， 只 有 当 元 素 没有 水 平 margin 时 候 ，box-sizing 才 能 真正 无 计 
算 ， 而 “宽度 分 离 ” 等 策略 则 可 以 彻底 解决 所 有 的 宽度 计算 的 问题 。 
此 ， 我 们 有 必要 好 好 地 想 一 想 ，box-sizing 属 性 发 明 的 初衷 到 底 是 什 
么 ? 是 为 了 让 那些 对 block 水 平 元 素 滥用 width 属性 的 人 少 出 bug 吗 ? 我 
不 这 么 认为 ! 


4. box-sizing 发 明 的 初衷 


根据 我 这 么 多 年 的 开发 经 验 ， 在 CSS 世 界 中 ， 唯 一 离 不 开 box- 
sizing:border-box 的 就 是 原生 普通 文本 框 <input> 和 文本 域 


六 


<textarea> 的 100% 自 适应 父 容器 宽度 。 





拿 文 本 域 <textarea> 举 例 ，<textareay> 为 替换 元 素 ， 蔡 换 元 素 的 
特性 之 一 就 是 尺寸 由 内 部 元 素 决 定 ， 且 无 论 其 display 属 性 值 是 inline 
还 是 block。 这 个 特性 很 有 意思 ， 对 于 非 蔡 换 元 素 ， 如 果 其 display 属 
性 值 为 block， 则 会 共有 流动 性 ， 宽 度 由 外 部 斥 寸 决定 ， 但 是 蔡 换 元 素 
的 宽度 却 不 受 display 水 平 影响 ， 因 此 ， 我 们 通过 CSS 修 改 <textarea> 
的 display 水 平 是 无 法 让 尺寸 100% 自 适应 父 容器 的 : 





textarea { 


display: block; /* 还 是 原来 的 尺寸 */ 
} 





所 以 ， 我 们 只 能 通过 width 设 定 让 <textarea> 尺 寸 100% 自 适应 父 容 


器 。 那 么 ， 问 题 就 来 了 ，<textarea> 是 有 border 的 ， 而 且 需 要 有 一 定 
的 padding 大 小 ， 否 则 输入 的 时 候 光 标 会 顶 着 边框 ， 体 验 很 不 好 。 于 

是 ，widthMborder 和 padding 注 定 要 共存 ， 同 时 还 要 整体 宽度 100% 自 
适应 容器 。 如 果 不 借助 其 他 标签 ， 肯 定 是 无 解 的 。 


在 浏览 器 还 没 文 持 box-sizing 的 年 代 ， 我 们 的 做 法 有 点 儿 类 似 
于 “宽度 分 离 "” 外 面 租 套 <div> 标 签 ， 模 拟 border 和 
padding，<textarea> 作 为 子 元 素 ，border 和 padding 全 部 为 6， 然后 
宽度 1009% 自 适应 父 级 <div>。 


手动 输入 http:/demo.cssworld.cn/3/2-9.php 或 者 扫 右 侧 的 二 维和 码 。 





然而 ， 这 种 模拟 也 有 局 限 性 ， 比 如 无 法 使 用 :focus 高 亮 父 级 的 边 
框 ， 因 为 CSS 世 界 中 并 无 父 选 择 器 ， 只 能 使 用 更 复杂 的 磐 套 加 其 他 CSS 
技巧 来 模拟 。 


因此 ， 说 来 说 去 ， 也 就 box-sizing:border-box 才 是 根本 解决 之 


textarea { 
width: 166%; 


-ms-box-sizing: border-box; /* for IE8 */ 
box-sizing: border-box; 


} 





在 我 看 来 ，box-sizing 被 发 明 出 来 最 大 的 初衷 应 该 是 解决 蔡 换 元 
素 宽 度 自 适应 问题 。 如 果真 的 如 我 所 言 ， 那 *{box-sizing:border- 
box} 是 不 是 没 用 在 点 儿 上 呢 ? 是 不 是 应 该 像 下面 这 样 CSS 重 置 才 更 合理 
呢 ? 





input, textarea, img, video, object { 
box-sizing: border-box; 





} 


3.2.5 ”相对 简单 而 单纯 的 height:auto 


width 和 height 是 CSS 世 界 中 同一 类 型 魔法 师 ， 都 是 直接 限定 元 素 
尺寸 的 。 所 以 ， 它 们 共用 一 套 “ 盒 尺寸 "模型 ，box-sizing 的 解释 也 是 
类 似 的。 但 是 ， 它 们 在 不 少 地 方 还 是 有 明显 区 别 的 ， 其 中 之 一 就 
是 height:auto 要 比 width:auto 简 单 而 单纯 得 多 。 


原因 在 于 ，CSS 的 默认 流 是 水 平方 向 的 ， 宽 度 是 稀缺 的 ， 高 度 是 无 
限 的 。 因 此 ， 宽 度 的 分 配 规则 就 比较 复杂 ， 高 度 就 显得 比较 随意 。 比 方 
说 ， 小 明 没 钱 交 房租 而 去 搬 砖 ， 一 块 砖头 5 cm 高 ， 请 问 ，10 块 砖 摆 在 一 
起 多 高 ?很 简单 ，50 cm。height:auto 的 表现 也 基本 上 就 是 这 个 套 
路 : 有 几 个 元 素 盒 子 ， 每 个 多 高 ， 然 后 一 加 ， 就 是 最 终 的 高 度 值 了 。 











当然 ， 涉 及 具体 场景 ， 就 会 有 其 他 的 小 故事 ， 比 方 说 元 素 float 容 


器 高 度 没 了 ， 或 者 是 margin 直 接 穿 过 去 ， 高 度 比 预期 的 矮 了 。 这 个 其 
实 不 是 height 的 问题 。 关 于 这 一 点 ， 我 会 在 对 应 的 属性 章节 帮 大 家 一 
探究 竟 





此 外 ，height:auto 也 有 外 部 尺寸 特性 。 但 据 我 所 知 ， 其 仅 存 在 于 
绝对 定位 模型 中 ， 也 就 是 “格式 化 高 上 度 ”。“ 格 式 化 局 度 ” 与 “格式 化 宽 
度 ” 类 似 ， 束 不 展开 讲解 了 。 











3.2.6 ”关于 height:168% 


height 和 width 还 有 一 个 比较 明显 的 区 别 就 是 对 百分比 单位 的 文 
持 。 对 于 width 属性 ， 就 算 父 元 素 width 为 auto， 其 百分比 值 也 是 文 持 
的 ; 但是， 对 于 height 必 性， 如 果 父 元 素 height 为 auto， 只 要 子 元 素 
在 文档 流 中 ， 其 百分比 值 完全 就 被 忽略 了 。 例 如 ， 茶 小 白 想 要 在 页 面 插 
入 一 个 <div>， 然 后 满 屏 显示 背景 图 ， 就 写 了 如 下 CSs: 





div { 
width: 166%;  /* 这 是 多 余 的 */ 


height: 166%; ”/* 这 是 无 效 的 */ 
background: url(bg.jpg); 








} 


然后 他 发 现 这 个 <div> 高 度 永远 是 eg， 哪怕 其 父 级 <body> 塞 满 了 内 容 也 
是 如 此 。 事 实 上 ， 他 需要 如 下 设置 才 行 : 


html, body { 
height: 166%; 
} 
并 且 仅 仅 设置 <body> 也 是 不 行 的 ， 因 为 此 时 的 <body> 也 没有 具体 的 高 
度 值 : 


body { 
/* 子 元 素 height:166% 依 旧 无 效 */ 


} 
只 要 经 过 一 定 的 实践 ， 我 们 都 会 发 现 对 于 普通 文档 流 中 的 元 素 ， 白 
分 比 高 度 值 要 想起 作用 ， 其 父 级 必须 有 一 个 可 以 生效 的 高 度 值 ! 但 是 ， 





怕 是 很 少 有 人 思考 过 这 样 一 个 问题 : 为 何 父 级 没有 具体 高 度 值 的 时 
候 ，height :166% 会 无 效 ? 


1. 为 何 height:166% 无 效 


有 一 种 看 似 合理 的 说 法 : 如 果 父 元 系 height :auto 子 元 素 还 文 

持 height:168%， 则 父 元 素 的 高 度 很 容易 陷入 死 循环 ， 高 度 无 限 。 例 
如 ， 一 个 <div> 元 素 里 面 有 一 张 vertical-align 为 bottom 同 时 高 度 为 
192 像 素 的 图 片 ， 此 时 ， 该 <div> 高 度 就 是 192 像 素 ， 假 设 此 时 插入 一 个 
子 元 素 ， 高 度 设 为 18686%， 如 果 此 时 height:166% 可 以 计算 ， 则 子 元 素 
应 该 也 是 192 像 素 。 但 是 ， 父 元 素 height 值 是 auto， 岂 不 是 现在 高 度 要 
从 原来 的 192 像 素 变 成 384 像 素 ， 然 后 height :166% 的 子 元 素 高 度 又 要 变 
成 384 像 素 ， 父 元 素 高 度 又 双 倍 .…… 死 循环 了 ! 




















实际 上 ， 这 种 解释 是 错误 的 ， 大 家 干 万 别 被 误导 。 证 据 就 是 冤 度 也 
存在 类 似 场景 ， 但 并 没有 死 循环 。 例 如 ， 在 下 面 这 个 例子 中 ， 父 元 素 采 
用 “最 大 宽度 ”， 然 后 有 一 个 in1line-block 子 元 素 宽 度 106%: 





<div class="box"> 


<img src="1.jpg"> 

<span class="text"> 红 色 背 景 是 父 级 </spany> 
</div> 
.box { 

display: inline-block; 

white-space: nowrap; 

background-color: #cd66080; 





.text { 
display: inline-block; 
width: 1662%; 
background-color: #34538b; 
color: #fff; 


} 





如 果 按 照 上 面 “ 高 度 死 循环 ”的 解释 ， 这 里 也 应 该 “宽度 死 循环 ”"， 因 为 后 
面 的 inline-block 元 素 按 照 我 们 的 理解 应 该 会 让 ee 
变 大 。 但 实际 上 并 没有 ， 宽 度 范围 可 能 超出 你 的 预期 〈 见 图 3-24) 。 父 
元 素 的 宽度 就 是 图 片 加 文字 内 容 的 宽度 之 和 。 


手动 输入 http:/demo.cssworld.cn/3/2-10.php 或 者 扫 右 侧 的 二 维 码 。 





红色 背景 是 父 级 





图 3-24 ”宽度 为 图 片 加 文字 内 容 的 宽度 之 和 


为 什么 会 这 样 表 现 呢 ? 


要 明白 其 中 的 原因 要 先 了 解 浏览 器 泻 染 的 基本 原理 。 首 先 ， 先 下 载 
文档 内 容 ， 加 载 头 部 的 样式 资源 〈 如 果 有 的 话 ) ， 然 后 按照 从 上 而 下 、 
自 外 而 内 的 顺序 演 染 DOM 内 容 。 套 用 本 例 就 是 ， 先 演 染 父 元 素 ， 后 泻 
染 子 元 素 ， 是 有 先后 顺序 的 。 因 此 ， 当 泻 染 到 父 元 素 的 时 候 ， 子 元 素 的 
width:166% 并 没有 演 染 ， 宽 度 就 是 图 片 加 文字 内 容 的 宽度 ;等 泻 染 到 
文字 这 个 子 元 素 的 时 候 ， 父 元 素 宽 度 已 经 固定 ， 此 时 的 width:16e% 就 
是 已 经 固定 好 的 父 元 素 的 宽度 。 宽 度 不 够 怎么 办 ? 溢出 就 好 
了 ，overflow 属 性 就 是 为 此 而 生 的 。 











同样 的 道理 ， 如 果 height 文 持 任意 元 素 166%， 也 是 不 会 死 循 环 
的 。 和 宽度 类 似 ， 静 态 泻 染 ， 一 次 到 位 。 

那 问 题 又 来 了 : 为 何 宽度 文 持 ， 高 度 就 不 文 持 呢 ?” 规 范 中 其 实 给 出 
了 答案 。 如 果 包 含 块 的 高 度 没 有 显 式 指定 〈 即 高 上 度 由 内 容 决 定 ) ， 并 且 
该 元 素 不 是 绝对 定位 ， 则 计算 值 为 auto。 一 句 话 总 结 就 是 :因为 解释 成 
了 auto。 要 知道 ，auto 和 百分比 计算 ， 肯定 是 算 不 了 的 : 


'auto' * 166/166 = NaN 


但 是 ， 宽 度 的 解释 却 是 : 如 果 包 含 块 的 宽度 取决 于 该 元 素 的 宽度 ， 那 么 
产生 的 布局 在 CSS 2.1 中 是 未 定义 的 。 











还 记 不 记得 本 书 第 2 章 最 后 的 “未 定义 行为 " 吗 ? 这 里 的 宽度 布局 其 
实 也 是 “未 定义 行为 ”， 也 就 是 规范 没有 明确 表示 该 怎样 ， 浏 览 喜 可 以 目 
己 根 所 理解 去 发 挥 。 好 在 根据 我 的 测试 ， 布 局 效果 在 各 个 浏览 右 下 都 是 








一 致 的 。 这 里 和 高 度 的 规范 定义 就 区 别 明 显 了 ， 高 度 明 确 了 就 是 auto， 
高 度 百分比 计算 自然 无 果 ，width 却 没有 这 样 的 说 法 ， 因 此 ， 就 按照 包 
含 块 真实 的 计算 值 作为 百分比 计算 的 基数 。 
2. 如 何 让 元 素 文 持 height:166% 效 果 

如 何 让 元 又 文 持 height:166% 效 末 ? 这 个 问题 的 答案 其 实 上 面 的 规 
范 已 经 给 出 了 ， 即 有 两 种 方法 。 

(1) 设 定 显 式 的 高 度 值 。 这 个 没什么 好 说 的 ， 例 如 ， 设 
置 height:666px， 或 者 可 以 生效 的 百分比 值 高 度 。 例 如 ， 我 们 比较 常 
见 的 : 


html, body { 
height: 1662%; 
} 


(2) 使 用 绝对 定位 。 例 如 : 


div { 
height: 1662%; 
position: absolute; 





} 


此 时 的 height:166% 就 会 有 计算 值 ， 即 使 祖先 元 素 的 height 计 算 
为 auto 也 是 如 此 。 需 要 注意 的 是 ， 绝 对 定位 元 素 的 百分比 计算 和 非 绝 对 
定位 元 素 的 百分比 计算 是 有 区 别 的 ， 区 别 在 于 绝对 定位 的 宽 高 百分比 计 
算是 相对 于 padding box 的 ， 也 就 是 说 会 把 padding 大 小 值 计 算 在 内 ， 但 
是 ， 非 绝对 定位 元 素 则 是 相对 于 content box 计 算 的 。 





我 们 可 以 看 一 个 例子 ， 对 比 一 下 : 


.box { 
height: 166pX; 
padding: 36pX; 
box-sizing: border-box; 
background-color: #beceeb; 


} 


.Child { 
height: 166%; 
background-color: #cd66080; 
} 
.box { 
height: 166pX; 
padding: 36pX; 
box-sizing: border-box; 
background-color: #beceeb; 
position: relative; 
} 
.Child { 
height: 166%; width: 166%; 
background-color: #cd66080; 
position: absolute; 





} 





可 以 看 到 ， 非 定位 元 素 的 宽 高 百分比 计算 不 会 将 padding 计 算 在 
内 ， 如 图 3-25 所 示 。 


如 果 对 图 3-25 所 示 的 结果 表示 质疑 ， 也 可 以 访问 
http://demo.cssworld.cn/ 3/2-11.php 或 者 扫 下 面 的 二 维 码 。 


高 度 100px 





图 3-25 ”绝对 定位 和 非 绝 对 定位 百分比 高 度 对 比 














我 对 这 两 种 height:166% 生 效 方法 的 评价 是 : 显 式 高 度 方 法 中 规 中 
和 扎 ， 意 料 之 中 ， 绝 对 定位 方法 剑 走 俩 锋 ， 文 持 隐 陈 高 度 计算 ， 给 人 意外 
之 襄 ， 但 本 里 脱离 文档 流 ， 使 其 仅 在 某 些 场景 有 四 两 拨 干 厂 的 效果 ， 比 
方 说 “图 片 左 右 半 区 扣 击 分 别 上 一 张 图 下 一 张 图 效果 ”的 布局 〈 见 图 3- 
26) 。 








图 3-26 所 示 的 效果 有 专门 的 演示 页 面 ， 可 以 手动 输入 
http://demo.cssworld.cn/3/2-12.php 或 者 扫 下 面 的 二 维 人 码 。 











图 3-26 ”图 片上 下 切 图 布局 示意 














原理 很 简单 ， 就 是 在 图 片 外 面包 一 层 具 有 "“ 包 囊 性 ”同时 具有 定位 特 
性 的 标签 。 例 如 : 


.box { 
display: inline-block; 


position: relative; 


} 











此 时 ， 只 要 在 图 片上 履 兰 两 个 绝对 定位 ， 同 时 设 neight:166%， 则 无 论 
图 片 多 高 ， 我 们 的 左右 半 区 都 能 目 动 和 图 片 高 度 一 模 一 样 ， 无 须 任 何 使 


用 JavaScript 的 计算 。 


3.3 CSS min-width/max-width 和 min- 
heightmax-height 二 三 事 


说 完了 width 和 height， 下 面 轮 到 min-width/max-width 和 min- 
height/max-height 了 ， 它 们 有 很 多 共性 。 比 方 襄 ， 它 们 都 是 与 尺寸 
相关 的 ， 盒 尺寸 机 制 和 一 些 值 的 泻 染 规则 也 是 一 样 的 ， 因 此 ， 这 部 分 内 
容 这 里 束 不 歼 述 了 ， 这 里 只 简单 讲 几 点 min/max-width/height 和 和 
width/height 不 一 样 的 地 方 。 


3.3.1 ”为 流体 而 生 的 mijn-width/max-width 





在 CSS 世 界 中 ，min-width/max-width 出 现 的 场景 一 定 是 自 适应 
布局 或 者 流体 布局 中 ， 因 为 ， 如 果 是 那 种 widthVyheight 定 死 的 砖头 式 
布局 ，min-width/max-width 就 没有 任何 出 现 的 价值 ， 因 为 它们 是 具 
有 边界 行为 的 属性 ， 所 以 没有 变化 自然 无 法 触发 ， 也 就 没有 使 用 价值 。 





因此 ， 新 人 并 不 会 经 常 使 用 min-width/max-width， 只 有 随 着 
CSS 技 能 深入 ， 能 够 兼顾 还 原 性 的 同时 还 兼顾 扩展 性 和 适 配 性 之 
后 ，min-width/max-width 才 会 用 得 越 来 越 多 ， 也 才能 真正 感受 到 IE7 
浏览 器 就 支持 min/max-width 是 多 么 好 的 一 件 事 情 。 





现代 桌面 显示 器 分 辩 率 越 来 越 大 ，960 像 素 网 页 设计 已 经 显得 有 些 
小 家 碧玉 了 ， 但 随便 搞 一 个 大 尺寸 (如 1400 像 素 ) 的 网 页 宽度 也 不 合 时 
宜 ， 因 为 还 有 很 多 笔记 本 用 户 ， 此 时 ， 一 种 特定 区 间 内 的 自 适 应 布局 方 
案 就 诞生 了 ， 网 页 宽度 在 1200 一 1400 像 素 自 适 应 ， 既 满足 大 屏 的 大 气 ， 
又 满足 笔记 本 的 良好 显示 ， 此 时 ，min-width/max-width 就 可 以 大 显 








神威 了 : 


.Container { 
min-width: 1266px; 
max-width: 1466px; 





} 


对 ， 无 须 width 设 置 ， 直 接 使 用 min-width/max-width。 


在 公众 号 的 热门 文章 中 ， 经 常会 有 图 片 ， 这 些 图 片 都 是 用 户 上 传 产 
生 的 ， 因 此 尺寸 会 有 大 有 小 ， 为 了 避免 图 片 在 移动 端 展示 过 大 影响 体 
验 ， 管 第 会 有 下 面 的 max-width 限 制 |: 








img { 
max-width: 166%; 


height: auto!important; 





} 


height:auto 是 必需 的 ， 否 则 ， 如 果 原 始 图 片 有 设 定 
height，max-width 生 效 的 时 候 ， 图 片 就 会 被 水 平 压缩 。 强 制 height 
为 auto 可 以 确保 宽度 不 超出 的 同时 使 图 片 保 持原 来 的 比例 。 但 这 样 也 会 
有 体验 上 的 问题 ， 那 束 是 在 加 载 时 图 片 占据 高 度 会 从 0 变 成 计算 高 度 ， 
图 文 会 有 明显 的 瀑布 式 下 落 。 


3.3.2 与 众 不 同 的 初始 值 


min-width/max-width 和 min-heigh/max-height 从 长 相 上 看 明 
显 和 width/ height 是 一 个 家 族 的 ， 总 以 为 属性 值 、 模 型 都 是 一 样 的 ， 
但 是 有 一 个 地 方 就 搞 了 特殊 ， 那 就 是 初始 值 。width/yheight 的 默认 值 
是 auto， 而 min-width/max-width 和 min-heigh/ max-height 的 初始 


值 则 要 复杂 些 。 这 里 要 分 为 两 部 分 ， 分 别 是 max-*# 系 列 和 min-*# 系 列 。 





max-width 和 max-height 的 初始 值 是 none，min-width 和 min-height 
的 初始 值 是 .………. 


虽然 MDN 和 W3C 维 基 的 文档 上 都 显示 min-width/min-height 的 
初始 值 是 9， 但 是 ， 根 据 我 的 分 析 和 测试 ， 所 有 浏览 器 中 的 min- 
width/min-height 的 初始 值 都 是 auto。 证 据 如 下 : 


(1) min-wdith/height 值 为 auto 合 法 。 例 如 ， 设 置 : 


<body style="min-width:auto;"> 





结果 所 有 浏览 器 


document .body. style.minWidth ; // 结果 是 auto 





说 明 min-* 支 持 auto 值 ， 同 样 ， 如 果 是 max-width:auto， 结 果 则 
是 ''， 进 一 步 证 明 min-width/height 值 为 auto 合 法 。 


(2) 数值 变化 无 动画 。 假 设 元 素 的 min-width/min-height 的 初 
始 值 是 6， 那么 ， 当 我 们 设置 transition 过 渡 同 时 改变 了 min- 
width/min-height 值 ， 岂 不 是 应 该 有 动画 效果 ?结果 : 


.box { 
transition: min-height .3s; 


.box:hover { 
min-height: 366pX; 
} 








局 标 经 过 .box 元 系 ， 元 素 突然 变 高 ， 并 无 动画 效果 ， 但 是 ， 如 果 是 下 面 
这 样 的 设置 : 





.box { 
min-height: 6 
transition: min-height .3s; 


.box:hover { 
min-height: 366pX; 
} 





鼠标 经 过 .box 元 素 ，transition 动 画 效果 就 出 现 了 。 这 就 证 明 
了 ，min-height 的 初始 值 不 是 8， 既然 不 是 9， 那 就 应 该 是 所 有 浏览 器 
都 支持 的 auto。 





于 是 ， 得 到 如 下 结论 : min-width/min-height 的 初始 值 

是 auto，max-width/max-height 的 初始 值 是 none。max-width/max- 
height 的 初始 值 为 何 是 none 而 不 是 auto 呢 ?这 个 问题 的 答案 其 实 与 下 
面 小 节 的 内 容 有 关 。 我 们 不 妨 举 个 简单 的 例子 解释 一 下 ， 已 知 父 元 素 宽 
度 400 像 素 ， 子 元 素 设 置 宽度 800 像 素 ， 假 如 说 max-width 初 始 值 

是 auto， 那 自然 使 用 和 width 一 样 的 解析 演 染 规则 ， 此 时 max-width 的 
计算 值 就 应 该 是 父 元 素 的 400 像 系 ， 此 时 ， 你 束 会 发 现 ， 子 元 系 的 800 像 
素 直 接 完 重 了 ， 因 为 max-width 会 履 盖 width。 于 是 ， 我 们 的 width 永 
远 不 能 设置 为 比 auto 计 算 值 更 大 的 宽度 值 了 ， 这 显然 是 有 问题 的 ， 这 就 
是 为 什么 max-width 初 始 值 是 none 的 原因 。 











3.3.3 ”超越 1important， 超 越 最 大 


CSS 世 界 中 ，min-width/max-width 和 min-height/max-height 
属性 间 ， 以 及 与 width 和 height 之 间 有 一 套 相 互利 盖 的 规则 。 这 套 规 则 
用 一 名 比较 通俗 的 话 概 括 就 是 : 超越 !important， 超 越 最 大 。 究 竟 是 
什么 意思 呢 ? 以 与 宽度 相关 的 属性 举例 说 明 。 


1. 超越 !important 


超越 !important 指 的 是 max-width 会 履 盖 width， 而 且 这 种 履 盖 不 
是 普通 的 履 盖 ， 是 超级 履 盖 ， 敌 盖 到 什么 程度 呢 ? 大 家 应 该 都 知道 CSS 
世界 中 的 !important 的 权重 相当 高 ， 在 业界 ， 往 往 会 把 !important 的 
权重 比 成 “泰坦 尼克 ”， 比 直接 在 元 素 的 style 属 性 中 设置 CSS 声 明 还 要 
高 ， 一 般 用 在 CSS 有 履 盖 JavaScript 设 置 上 。 但 是 ， 就 是 这 么 厉害 
的 !important， 直 接 被 nax-width 一 个 浪头 就 拍 沉 了 。 比 方 说 ， 针 对 
下 面 的 HIML 和 CSS 设 置 ， 图 片 最 后 呈现 的 宽度 是 多 少 呢 ? 











<img src="1.jpg” style="width:4886px!important;"> 


img { max-width: 256px; } 





答案 是 256px。style、!important 通 通 靠 边 站 ! 因为 max-width 会 履 


盖 width。 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/3/3-1.php 或 者 扫 下 面 的 
二 维 码 。 结 果 如 图 3-27 所 示 。 








图 3-27 图 片 宽度 256 像 素 
2. 超越 最 大 


超越 最 大 指 的 是 min-width 禾 盖 max-width， 此 规则 发 生 在 min- 
width 和 max-width 冲 突 的 时 候 。 例 如 ， 下 面 这 种 设置 : 


.container { 
min-width: 1466pX; 


max-width: 1268px; 
} 





最 小 宽度 居然 比 最 大 宽度 设置 得 还 大 ， 此 时 ， 两 者 必定 是 你 死 我 活 
的 状态 。 究 竞 谁 死 呢 ?遵循 “超越 最 大 ”规则 注意 不 是 “后 来 居 上 ” 规 
则 ) ，min-width 活 下 来 ，max-width 被 忽略 ， 于 是 ，.container 元 
素 表现 为 至 少 1400 像 素 宽 。 








此 履 盖 规则 比较 好 理解 ， 束 不 专门 溃 示 了 。 
3.3.4 任意 高 度 元 素 的 展开 收 起 动画 技术 


“展开 收 起 ”效果 是 网 页 中 比较 和 常见 的 一 种 交互 形式 ， 通 常 的 做 法 是 
控制 display 属 性 值 在 none 和 其 他 值 之 间 切 换 ， 虽 说 功能 可 以 实现 ， 但 





是 效果 略 显 生硬 ， 所 以 就 会 有 这 样 的 需求 一 一 希望 元 素 展 开 收 起 时 能 
明显 的 高 度 滑动 效果 。 传 统 实现 可 以 使 用 jQuery 的 
slideUp()/sl1ideDown() 方 法 ， 但 是 ， 在 移动 端 ， 因 为 CSS3 动 画 支 持 
恨 好 ， 所 以 移动 端的 JavaScript 框 架 都 是 没有 动画 模块 的 。 此 时 ， 使 用 
CSS 实 现 动画 就 成 了 最 佳 的 技术 选 型 。 











我 们 的 第 一 反应 就 是 使 用 height+overflow:hidden 实 现 。 但 是 ， 
很 多 时 候 ， 我 们 展开 的 元 素 内 容 是 动态 的 ， 换 句 话说 高 度 是 不 固定 的 ， 
因此 ，height 使 用 的 值 是 默认 的 auto， 应 该 都 知道 的 auto 是 个 关键 字 
值 ， 并 非 数值 ， 正 如 height:166% 的 166% 无 法 和 auto 相 计算 一 样 ， 从 
6px 到 auto 也 是 无 法 计算 的 ， 因 此 无 法 形成 过 渡 或 动画 效果 。 





因此 ， 下 面 代码 呈现 的 效果 也 是 生 便 地 展开 和 收 起 : 


.element { 
height: ©; 
overflow: hidden; 
transition: height .25s; 


} 


.element.active { 
height: auto; /* 没有 transition 效 果 ， 只 是 生硬 地 展开 */ 








} 





难道 就 没有 什么 一 劳 永 逸 的 实现 方法 吗 ? 有 ， 不 妨 试 试 nax- 
height，CSS 代 人 码 如 下 : 


.element { 
max-height: ©; 
overflow: hidden; 
transition: max-height .25s; 


.element.active { 
max-height: 666px; /* 一 个 足够 大 的 最 大 高 度 值 */ 





} 


其 中 展开 后 的 max-height 值 ， 我 们 只 需要 设 定 为 保证 比 展 开 内 容 高 度 
大 的 值 就 可 以 ， 因 为 naax-height 值 比 height 计 算 值 大 的 时 候 ， 元 素 的 
高 度 束 是 height 属 性 的 计算 高 度 ， 在 本 交互 中 ， 也 就 是 height:auto 
时 候 的 高 度 值 。 于 是 ， 一 个 高 度 不 定 的 任意 元 素 的 展开 动画 效果 就 实现 
由 县 

















眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/3/3-2.php 或 者 扫 右 侧 的 
二 维 码 。 





但 是 ， 使 用 此 方法 也 有 一 点 要 注意 ， 即 虽然 说 从 适用 范围 讲 ，max- 
height 值 越 大 使 用 场景 越 多 ， 但 是 ， 如 果 max-height 值 太 大 ， 在 收 起 
的 时 候 可 能 会 有 “效果 延迟 ”的 问题 ， 比 方 说， 我 们 展开 的 元 素 高 度 是 
100 像 素 ， 而 max-height 是 1000 像 素 ， 动 男 时 间 是 250 ms， 假 设 我 们 动 
画 函 数 是 线性 的 ， 则 前 225 ms 我 们 是 看 不 到 收 起 效果 的 ， 因 为 max- 
height 从 1000 像 素 到 100 像 素 变化 这 段 时 间 ， 元 素 不 会 有 区 域 被 隐藏 ， 
会 给 人 动画 延迟 225 ms 的 感觉 ， 相 信 这 不 是 你 想 看 到 的 。 








因此 ， 我 个 人 建议 max-height 使 用 足够 安全 的 最 小 值 ， 这 样 ， 收 
起 时 即使 有 延 人 运 ， 也 会 因为 时 间 很 短 ， 很 难 被 用 户 察觉 ， 并 不 会 影响 体 


3.4 内 联 元 素 


如 果 纯 粹 套 CSS 规 范 的 话 ， 这 里 标题 应 该 是 “内 联 级 元 素 ”(inline- 
level elements) 。 但 在 本 书 中 “内 联 级 元 素 ” 全 部 简称 为 “内 联 元 素 ”， 原 
因 在 第 3 章 开 头 部 分 已 做 说 明 ， 不 再 袭 述 。 


在 讲 元 素 的 内 外 盒子 的 时 候 ， 前 面 曾 提 到 过 “外 在 盒 
子 ” 有 inline、block 和 run-in 三 种 水 平 。 其 中 run-in 鲜 有 人 使 用 ， 且 
有 淘汰 风险 ， 可 以 忽略 ; 剩 下 的 in1ine 和 block 几 乎 瓜分 了 剩 下 的 全 部 
江山 ， 是 流体 布局 的 本 质 所 在 。 从 作用 上 来 讲 ， 块 级 负 贡 结构 ， 内 联 负 
贡 内 容 。CSS 世 界 是 为 图 文 展示 而 设计 的 。 所 谓 图 文 ， 指 图 片 和 文字 ， 
是 最 典型 的 内 联 元 素 。 所 以 ， 在 CSS 世 界 中 ， 内 联 元 素 是 最 为 重要 的 ， 
涉及 的 CSS 属 性 也 非常 之 多 ， 这 些 CSS 属 性 往往 具有 继承 特性 ， 混 合 在 
一 起 会 导致 CSS 解 析 规 则 非常 复杂 。 这 就 是 内 联 元 素 的 解析 比 块 级 元 素 
解析 更 难 理解 的 原因 一 一 其 是 多 个 属性 共同 作用 的 结果 ， 需 要 对 内 联 元 
素 特 性 ， 内 联 盒 模型 以 及 当前 CSS 属 性 都 了 解 ， 才 能 明白 其 中 的 原因 。 








不 要 担心 ， 从 这 里 开始 ， 我 们 会 慢 慢 揭 开 内 联 世 界 的 层 层面 纱 。 
3.4.1 哪些 元 素 是 内 联 元 又 

我 们 先 来 了 解 如 何 辨 别 内 联 元 素 。 
1. 从 定义 看 


首先 要 明白 这 一 点 :“ 内 联 元 素 ” 的 “内 联 ” 特 指 “ 外 在 盒子 ”， 
和 “display 为 inline 的 元 素 ” 不 是 一 个 概念 ! inline-block 和 


in1ine-tab1le 都 是 “内 联 元 素 "， 因 为 它们 的 “外 在 盒子 ”都 是 内 联 盒 
子 。 上 自然 display:inline 的 元 素 也 是 “内 联 元 素 ”*”， 那 么 ，<button> 按 
钮 元 素 是 内 联 元 素 ， 因 为 其 display 默 认 值 是 ijnline-block; <img> 图 
片 元 素 也 是 内 联 元 素 ， 因 为 其 display 默 认 值 是 jnline 等 。 


2. 从 表现 看 





就 行为 表现 来 看 , “内 联 元 素 ” 的 典型 特征 就 是 可 以 和 文字 在 一 行 显 
示 。 因 此 ， 文 人 字 是 内 联 元 素 ， 图 片 是 内 联 元 素 ， 按 钮 是 内 联 元 系 ， 输 入 
框 、 下 拉 框 等 原生 表单 控件 也 是 内 联 元 系 。 











下 面 有 一 个 疑问 :浮动 元 素 貌 似 也 是 可 以 和 文字 在 一 个 水 平 上 显示 
的 ， 是 不 是 浮动 元 素 也 是 内 联 级 别 的 呢 ? 不 是 的 。 实 际 上 ， 浮 动 元素 和 
后 面 的 文字 并 不 在 一 行 显示 ， 浮 动 元 素 已 经 在 文档 流 之 外 了 。 证 据 就 
是 ， 当 后 面 文字 足够 多 的 时 候 ， 文 字 并 不 是 在 浮动 元 素 的 下 面 ， 而 是 继 
续 在 后 面 。 这 就 说 明 ， 浮 动 元 素 和 后 面 文字 不 在 一 行 ， 只 是 它们 恰好 站 
在 了 一 起 而 已 。 真 相 是 ， 浮 动 元 素 会 生成 “ 块 盒子 "， 这 就 是 后 话 了 。 
3.4.2 ”内 联 世界 深入 的 基础 一 一 内 联 盒 模型 

本 节 的 内 容 可 谓 CSS 进 阶 标志 知识 点 ， 是 入 门 CSS 开 发 人 员 和 熟练 
CSS 开 发 人 员 之 间 的 分 水 岭 ， 是 需要 反复 拿 来 看 拿 来 体味 的 。 这 里 介绍 
的 “内 联 盒 模型 > 是 简易 版 ， 但 是 已 经 足够 ， 如 果 大 家 对 完整 的 概念 和 名 
词 感 兴 趣 ， 可 以 阅读 规范 文档 。 


















































下 面 是 一 段 很 普通 的 HTML : 








<p> 这 是 一 行 普通 的 文字 ， 这 里 有 个 <em>em</em> 标签 。</p> 


看 似 普通 ， 实 际 上 包含 了 很 多 术语 和 概念 ， 或 者 换 种 通俗 的 说 法 ， 
包含 了 很 多 种 盒子 。 我 归结 为 下 面 这 些 盒子 。 


(1) 内 容 区 域 (content area) 。 内 容 区 域 指 一 种 围绕 文字 看 不 见 
的 盒子 ， 其 大 小 仅 受 字符 本 身 特 性 控制 ， 本 质 上 是 一 个 字符 盒子 
Ccharacter box) ; 但 是 有 些 元 素 ， 如 图 片 这 样 的 蔡 换 元 素 ， 其 内 容 显 
然 不 是 文字 ， 不 存在 字符 盒子 之 类 的 ， 因 此 ， 对 于 这 些 元 素 ， 内 容 区 域 
可 以 看 成 元 素 目 号 。 











定义 上 说 内 容 区 域 是 “看 不 见 的 "， 这 对 理解 “内 容 区 域 ”是 不 利 的 ， 
好 在 根据 我 多 年 的 理解 与 实践 ， 我 们 可 以 把 文本 选中 的 背景 色 区 域 作为 
内 容 区 域 ， 例 如 ， 如 图 3-28 所 示 。 





图 3-28 ”内 容 区 域 示意 





这 对 于 解释 各 种 内 联 相 关 的 行为 都 非常 可 行 ， 文 本 选中 区 本 质 上 就 
等 同 于 基本 盒 尺 寸 中 的 content box， 都 是 content， 语义 上 也 说 得 通 。 








实际 上 ， 内 容 区 域 并 没有 明确 的 定义 ， 所 以 将 其 理解 为 em 盒 〈em- 
box， 可 看 成 是 中 文字 符 占据 的 1 em 高 度 区 域 ) 也 是 可 以 的 ， 但 是 在 本 
书 中 ， 为 了 方便 演示 和 讲解 ， 将 其 全 部 理解 为 文本 选中 的 区 域 。 





在 IE 和 Firefox 浏 览 器 下， 文字 的 选中 背景 总 能 准确 反映 内 容 区 域 范 
围 ， 但 是 Chrome 浏 览 器 下 ，: :selection 范 围 并 不 总 是 准确 的 ， 例 
如 ， 和 图 片 混 排 或 者 有 垂直 padding 的 时 候 ， 范 围 会 明显 过 大 ， 这 一 点 
需要 注意 。 后 面 行 高 等 章节 会 利用 此 选中 背景 帮助 我 们 理解 。 











内 容 区 域 在 解释 内 联 元 素 的 各 种 行为 表现 时 ， 出 镜 率 出 奇 地 高 ， 建 
议 大 家 这 里 多 多 留意 。 


(2) 内 联 盒子 (inline box) 。“ 内 联 盒子 ?不 会 让 内 容 成 块 显示 ， 
而 是 排 成 一 行 ， 这 里 的 “内 联 盒子 ?实际 指 的 就 是 元 系 的 “外 在 盒子 "， 用 
来 决定 元 素 是 内 联 还 是 块 级 。 该 盒子 又 可 以 细 分 为 “内 联 盒子 ”和 “匿名 
内 联 盒子 "两 类 : 





De 


如 果 外 部 含 内 联 标 签 (<span>、<a> 和 和 <em> 等) ， 则 属于 “内 联 盒 
子 ”( 实 线 框 标 注 ) ; 如 果 是 个 光秃秃 的 文字 ， 则 属于 “匿名 内 联 盒 
子 ”( 虚 线 框 标注 〉。 





需要 注意 的 是 ， 并 不 是 所 有 光秃秃 的 文字 都 是 “匿名 内 联 盒 子 ”， 其 
还 有 可 能 是 “匿名 块 级 盒子 ”， 关 键 要 看 前 后 的 标签 是 内 联 还 是 块 级 。 











(3) 行 框 盒子 (ine box) 。 例 如 : 





文 里 有 个 < em>em< /em> 标签 。 

















每 一 行 束 是 一 个 “ 行 框 盒子 ”《〈 实 线 框 标 注 ) ， 每 个 “ 行 框 盒子 ”又 是 由 
个 一 个 “内 联 盒子 ?组 成 的 。 


(4) 包含 盒子 〈containing box) 。 例 如 : 


< p> 这 是 一 行 普通 的 文字 ， 这 里 有 个 《 em>em< /em> 标签 。< /p> 





<p> 标 俭 贺 是 一 个 "包含 盒子 ”〈 实 线 框 标 注 ) ， 此 盒子 由 一 行 一 行 的 “ 行 


框 盒子 ?组 成 。 


需要 补充 说 明 一 点 ， 在 CSS 规 范 中 ， 并 没有 “包含 盒子 ”的 说 法 ， 更 
准确 的 称呼 应 该 是 “包含 块 ”(containing block) 。 这 里 之 所 以 把 它 称 为 
盒子 ， 一 是 为 了 与 其 他 盒子 名 称 统一 ， 二 是 称 为 盒子 更 形象 、 更 容易 理 
解 。 





3.4.3 ”幽灵 空白 节点 








“幽灵 空白 节点 ?是 内 联合 模型 中 非常 重要 的 一 个 概念 ， 有 具体 指 的 
是 : 在 HIML5 文 档 声 明 中 ， 内 联 元 素 的 所 有 解析 和 演 染 表现 就 如 同 每 
个 行 框 盒 子 的 前 面 有 一 个 “空白 节点 ”一 样 。 这 个 “空白 节 氮 ?永远 透明 ， 
不 占据 任何 宽度 ， 看 不 见 也 无 法 通过 脚本 获取 ， 就 好 像 幽灵 一 样 ， 但 又 
确 确 实 实 地 存在 ， 表 现 如 同文 本 节点 一 样 ， 因 此 ， 我 称 之 为 "幽灵 空白 
节 扩 ”。 











注意 ， 这 里 有 一 个 前 提 ， 文 档 声明 必须 是 HITML5 文 档 声 明 (HTML 
代码 如 下 ) ， 如 果 还 是 很 多 年 前 的 老 声 明 ， 则 不 存在 “幽灵 空白 节点 ”。 


<!doctype html> 
我 们 可 以 举 一 个 最 简单 的 例子 证 明 “ 幽 灵 空 白 节 点 ”确实 存在 ， CSS 
和 HTML 代 码 如 下 : 








div { 

background-color: #cd66080; 
} 
span { 

display: inline-block; 





<div><span></span></divy> 





结果 ， 此 <div> 的 高 度 并 不 是 ge， 而 是 如 图 3-29 所 示 有 高 度 。 


1984 x 18 


[x | Elements 








图 3-29 ”高度 不 为 8 证 明 幽 灵 空 白 节点 的 存在 〔 截 自 Chrome 浏 览 器 ) 








这 着 实 很 奇怪 ， 内 部 的 <span> 元 素 的 蜗 局 明明 都 是 09， 标签 之 间 也 
没有 换行 符 之 类 的 嫌疑 ， 怎 么 cdiv> 的 高 度 会 是 图 3-29 中 所 示 的 18 像 素 
呢 ? 


作 呈 的 就 是 这 里 的 “幽灵 空 昌 节 点 >”， 如 果 我 们 认为 在 <span> 元 系 的 
前 面 还 有 一 个 宽度 为 8 的 空白 字符 ， 是 不 是 一 切 束 解释 得 通 呢 ? 











当然 ， 为 何 高 度 是 18 像 素 这 里 三 言 两 语 是 解释 不 清 的 ， 可 以 看 后 面 
对 line-height 和 vertical-align 的 深入 讲解 ， 这 里 只 是 为 了 证 明 “ 幽 
灵 空 白 节 点 ”确实 是 存在 的 。 








虽然 说 “幽灵 空白 节点 ?是 我 目 己 根据 CSS 的 特性 表现 起 的 一 个 非常 
形象 的 名 字 ， 但 其 绝 不 是 空中 楼 阁 、 信 口 胡 话 的 。 规 范 中 实际 上 对 这 
个 “幽灵 空白 节点 ?是 有 提 及 的 , “幽灵 空白 节点 ”实际 上 也 是 一 个 盒子 ， 
不 过 是 个 假想 盒 ， 名 叫 “strut"”， 中 文 直译 为 " 文 柱 ”， 是 一 个 存在 于 每 
个 “ 行 框 盒子 ”前 面 ， 同 时 有 共有 该 元 素 的 字体 和 行 高 属性 的 0 宽度 的 内 联 








盒 。 规 范 中 的 原文 如 下 : 


Each line box starts with a zero-width inline box with the element’s font and 


line height properties. We call that imaginary box a “strut”. 








明白 “幽灵 空白 节点 ”的 存在 是 理解 后 续 很 多 内 联 元 际 为 何 会 这 么 表 
现 的 基础 。 





[1] “外 在 盒子 "除了 :inline- block， 还 有 run-in， 但 Chrome 已 经 放 
弃 对 run-in 的 文 持 有 一 段 时 间 了 ， 因 此 ， 本 书 不 对 其 做 分 析 。 


盒 尺 寸 中 的 4 个 盒子 content box、padding box、border box 和 margin 
box 分 别 对 应 CSS 世 界 中 的 content、padding、border 和 margin 属 
性 ， 我 把 这 4 个 属性 称 为 “使 太 寸 四 大 家 族 ?”， 下 面 我 们 一 个 一 个 揭 开 < 四 
大 家 族 ” 鲜 为 人 知 的 一 面 。 


4.1 深入 理解 content 


4.1.1 _ content 与 替换 元 素 
1. 什么 是 从 换 元 素 


蔡 换 元 素 (replaced element) 可 以 说 是 CSS 世 界 中 的 另外 一 个 派 
系 。 





根据 “外 在 盒子 ”是 内 联 还 是 块 级 我 们 可 以 把 元 系 分 为 内 联 元 素 和 块 
级 元 素 ， 而 根据 是 售 具 有 可 将 换 内 容 ， 我 们 也 可 以 把 元 系 分 为 蔡 换 元 素 
和 非 侍 换 元 系 。 那 什么 是 蔡 换 元 系 呢 ? 














蔡 换 元 素 ， 顾 名 思 义 ， 内 容 可 以 被 替换 。 举 个 典型 的 例子 ; 


<img src="1.jpg"> 


如 果 我 们 把 上 面 的 1.jpg 换 成 2.jpg， 是 不 是 图 片 就 会 蔡 换 了? 





这 种 通过 修改 某 个 属性 值 呈 现 的 内 容 束 可 以 被 蔡 换 的 元 素 就 称 
为 “ 蔡 换 元 素 *”。 因 此 ，<img>、<object>、<video>、<iframe> 或 者 
表单 元 素 <textarea> 和 <input> 都 是 虹 型 的 奉 换 元 素 。 


答 换 元 素 除 了 内 容 可 答 换 这 一 特性 以 外 ， 还 有 以 下 一 些 特性 。 


(1) 内 容 的 外 观 不 受 页 面 上 的 CSS 的 影响 。 用 专业 的 话 讲 就 是 在 
样式 表现 在 CSS 作 用 域 之 外 。 如 何 更 改善 换 元 素 本 喘 的 外 观 ? 需要 类 
似 appearance 属 性， 或 者 浏览 右上 自身 暴露 的 一 些 样式 接口 ， 例 如 : : - 


ms-check{} 可 以 更 改 高 版 本 IE 浏 览 器 下 单 复 选 框 的 内 间距 、 背 景色 等 
样式 ， 但 是 直接 input[type= 'checkbox ' ]{} 却 无 法 更 改 内 间距 、 背 景 
色 等 样式 。 


(2) 有 上 自己 的 尺寸 。 在 web 中 ， 很 多 蔡 换 元 素 在 没有 明确 尺寸 设 
定 的 情况 下 ， 其 默认 的 尺寸 〈 不 包括 边框 ) 是 300 像 素 x150 像 素 ， 如 
<video>、<iframe> 或 者 <canvas> 等 ， 也 有 少 部 分 替换 元 素 为 0 像素 ， 
如 <img> 图 片 ， 而 表单 元 素 的 蔡 换 元 陛 的 尺寸 则 和 浏览 器 有 关 ， 没 有 明 
显 的 规律 。 

















(3) 在 很 多 CSS 属 性 上 有 自己 的 一 套 表现 规则 。 比 较 具 有 代表 性 
的 就 是 vertical-align 属 性 ， 对 于 蔡 换 元 系 和 非 蔡 换 元 
素 ，vertical-align 属 性 值 的 解释 是 不 一 样 的 。 比 方 说 vertical- 
align 的 默认 值 的 baseline， 很 简单 的 属性 值 ， 基 线 之 意 ， 被 定义 为 字 
符 x 的 下 边缘 ， 在 西方 语言 体系 里 近乎 常识 ， 几 乎 无 人 不 知 ， 但 是 到 了 
蔡 换 元 系 那 里 就 不 适用 了 。 为 什么 呢 ? 因为 将 换 元 素 的 内 容 往往 不 可 能 
含有 字符 xX， 于 是 替换 元 素 的 基线 就 被 便 生 生 定 义 成 了 元 素 的 下 边缘 。 














下 面 提 个 简单 问题 : 下 拉 框 <select> 是 不 是 替换 元 素 ? 答案 : 是 
的 。 

我 们 可 以 对 照 一 下 “替换 元 素 ” 的 一 些 特点 : 首先 ， 内 容 可 蔡 换 ， 例 
如 我 们 设置 multiple 属 性 ， 下 拉 直 接 变 成 了 展开 的 直选 多 选 模式 ; 其 
次 ， 基 本 样式 外 部 CSS 很 难 改变 ; 最 后 ， 它 有 自己 的 尺寸 ， 基 线 也 是 下 
2. 蔡 换 元 素 的 默认 display 值 











所 有 的 蔡 换 元 素 都 是 内 联 水 平 元 素 ， 也 就 是 蔡 换 元 素 和 替换 元 素 、 
替换 元 素 和 文字 都 是 可 以 在 一 行 显 示 的 。 但 是 ， 蔡 换 元 素 默认 的 
display 值 却 是 不 一 样 的 ， 见 表 4-1。 


表 4-1 各 个 蔡 换 元 素 的 默认 display 属 性 值 








和 as 
is 





通过 对 比 发 现 ， 正 浏览 器 和 Chrome 浏 览 器 的 返回 值 都 是 一 样 的 ， 但 
是 Firefox 浏 览 器 在 <textarea> 和 绝 大 多 数 类 型 的 cinput> 元 素 上 却 是 
返回 的 jnline 而 不 是 ijnline-block， 这 其 实 是 一 个 很 奇怪 也 很 有 意思 
的 现象 。 为 什么 说 奇怪 呢 ? 我 们 都 知道 下 面 两 种 按钮 元 素 的 表示 方法 尺 
寸 长 相 是 一 模 一 样 的 : 











<input type="button"” value=" 按 钮 "> 





<button type="button"> 按 钮 </button> 


但 是 在 Firefox 下 ， 前 者 的 display 属 性 默认 值 是 inline， 后 者 却 
是 inline-block， 很 自然 会 奇怪 明明 一 个 模子 里 出 来 的 ， 怎 么 会 有 这 
个 区 别 呢 ? 





实际 上 ， 如 果 我 们 深入 探 完 束 会 发 现 ， 似 乎 Firefox 浏 览 喜 在 蔡 换 元 
素 的 内 联 表现 这 一 块 还 是 有 些 上 自己 的 想法 的 。 


首先 回答 一 下 这 个 疑问 : x<input> 和 <button> 按 钮 的 区 别 在 什么 
地 方 ? 区 别 在 于 两 种 按钮 默认 的 white-space 值 不 一 样 ， 前 者 是 pre， 
后 者 是 normal， 所 表示 出 来 的 现象 差异 就 是 ， 当 按钮 文字 足够 多 
的 时 候 ，<input> 按 钮 不 会 自动 换行 ，<button> 按 钮 则 会 。 


当然 ， 这 并 不 是 Firefox 浏 览 器 下 两 种 按钮 默认 display 值 不 一 样 的 
原因 ， 那 完 况 是 什么 原因 呢 ? 我 仔细 对 比 了 一 下 ， 发 现 没 有 规律 可 言 ， 
原因 铠 怕 只 有 浏览 器 厂商 自己 才 知 道 了 。 当 然 ， 抛 出 此 问题 的 目的 不 是 
得 出 这 里 略 显 敷衍 的 答案 ， 而 是 为 了 引出 下 面 的 重要 内 容 ， 也 就 是 : 我 
们 没有 必要 深究 为 什么 一 个 是 in1ine 一 个 是 in1ine-block， 因 为 对 于 
蔡 换 元 素 而 言 ， 这 是 没有 意义 的 。 为 什么 这 么 说 呢 ? 和 蔡 换 元 素 有 很 多 表 




















现 规 则 和 非 蔡 换 元 素 不 一 样 ， 其 中 之 一 是 宽度 和 高 度 的 尺寸 计算 规则 ， 
简单 描述 一 下 就 是 ， 蔡 换 元 素 的 display 是 ijnline、block 和 inline-block 
中 的 任意 一 个 ， 其 尺寸 计算 规则 都 是 一 样 的 。 


3. 蕉 换 元 系 的 尺寸 计算 规则 


我 个 人 将 蔡 换 元 素 的 尺寸 从 内 而 外 分 为 3 类 : 固有 尺寸 、HTML 尺 
寸 和 CSS 尺 寸 。 


(1) 固有 尺寸 指 的 是 瞪 换 内 容 原 本 的 尺寸 。 例 如 ， 图 片 、 视 频 作 
为 一 个 独立 文件 存在 的 时 候 ， 都 是 有 着 上 自己 的 宽度 和 高 度 的 。 这 个 宽度 
和 高 度 的 大 小 就 是 这 里 的 “固有 尺寸 ”。 对 于 表单 类 蔡 换 元 素 , “固有 尺 
寸 ” 可 以 理解 为 “不 加 修饰 的 默认 尺寸 "?。 比 方 说 ， 你 在 空白 页 面 写 
上 <input>， 此 时 的 尺寸 就 可 以 看 成 是 <input> 元 素 的 “固有 尺寸 "?。 这 
就 是 输入 框 、 下 拉 框 这 些 表单 元 素 默 认 的 font-size/padding/margin 
等 属性 全 部 使 用 px 作为 单位 的 原因 ， 因 为 这 样 可 以 保证 这 些 元 素 的 “ 固 
有 尺寸 "是 固定 大 小 ， 不 会 受 外 界 CSS 的 影响 。 








(2) HIML 尺 寸 这 个 概念 略微 抽象 ， 我 们 不 妨 将 其 想象 成 水 者 重 
里 面 的 那 一 层 白色 的 膜 ， 里 面 是 “固有 尺寸 "这 个 蛋黄 蛋白 ， 外 面 是 “CSS 
尺寸 ”这 个 和 蛋 这 。“HTML 尺 寸 " 只 能 通过 HTML 原 生 属 性 改变 ， 这 些 
HTML 原 生 属 性 包括 <img> 的 width 和 height 属 性 、<input> 的 size 属 
性 、<textarea> 的 cols 和 rows 属 性 等 。 











<img width="366" height="16060"> 


<input type="file" size="30"> 
<textarea cols="20" rows="5></textarea> 





(3) CSS 尺 寸 特 指 可 以 通过 CSS 的 width 和 height 或 者 max- 


width/Vmin-width 和 max-height/min-height 设 置 的 尺寸 ， 对 应 盒 尺 
寸 中 的 content box。 


可 以 影响 丛 换 元 素 尺 寸 的 3 层 结构 如 图 4-1 所 示 。 这 3 层 结 构 的 计算 
规则 具体 如 下 。 


Fr-------” 


, 月 部 放大 UP 


: > CSS 尺 寺 
人 , A 电 HTML 足 才 
和 





图 4-1 替换 元 素 的 3 层 尺 寸 结构 示意 








。 如 果 没 有 CSS 尺 寸 和 HTML 尺 寸 ， 则 使 用 固有 尺寸 作为 最 终 的 宽 
高 。 例 如 ， 下 和 面 的 HTML 代 码 : 


<img src="1.jpg"> 


假设 1.jpg 这 张 图 片 原 尺寸 是 256 x 192， 则 在 页 面 中 此 图 所 呈现 的 
宽 高 就 是 256 像 素 x192 像 素 。 





。 如 果 没 有 CSS 尺 寸 ， 则 使 用 HTML 尺 寸 作 为 最 终 的 宽 高 。 仍 以 图 片 
举例 : 





<img src="1.jpg" width="128" height="96"> 


我 们 通过 HTML 属 性 width 和 height 限 定 了 图 片 的 HTML 尺寸， 
此 ， 最 终 图 片 所 呈现 的 宽 高 就 是 128 像 素 x96 像 素 。 


e。 如 果 有 CSS 尺 寸 ， 则 最 终 尺 寸 由 CSS 属 性 决定 。 我 们 继续 上 面 的 例 
子 : 


img { width: 266px; height: 156px; } 


<img src="1.jpg" width="128" height="96"> 





此 时 回 有 尺寸 、HTML 尺 寸 和 CSS 尺 寸 同 时 存在 ， 起 作用 的 是 CSS 
属性 限定 的 尺寸 ， 因 此 ， 最 终 图 片 所 呈现 的 宽 高 就 是 200 像 素 x150 像 











。 如果“ 固有 尺寸 ”含有 固有 的 宽 高 比例 ， 同 时 仅 设 置 了 宽度 或 仅 设 置 
了 高 度 ， 则 元 素 依 然 按 照 固 有 的 宽 高 比例 显示 。 我 们 还 是 拿 图 片 举 
例 ， 例 如 ， 下 面 的 CSS 和 HTML 代 码 : 


img { width: 266pxj } 





<img src="1.jpg"> 


虽然 CSSs 中 仅仅 设置 了 width， 但 图 片 这 种 蔡 换 元 素 的 资源 本 身 具 
有 特定 的 宽 高 比例 ， 因 此 ，height 也 会 等 比例 计算 。 所 以 ， 最 终 图 片 
所 呈现 的 宽 高 就 是 200 像 素 x150 像 素 (150 = 200 x192/256) 。 





如 果 本 例子 仅 设 置 height:156px， 最 后 的 结果 也 是 这 样子 。 


。 如 采 上 面 的 条 件 都 不 符合 ， 则 最 终 宽 上 度 表 现 为 300 像 素 ， 高 度 为 150 
像素 ， 宽 高 比 2:1。 例 如 : 


<video></video> 


在 所 有 现代 浏览 器 下 的 尺寸 表现 都 是 300 像 素 x150 像 素 。 


。 内 联 蔡 换 元 素 和 块 级 蔡 换 元 素 使 用 上 面 同 一 套 尺 寸 计算 规则 。 例 
如 : 


img { display: block; } 





<img src="1.jpg"> 








虽然 图 片 此 时 变 成 了 块 级 ， 但 是 尺寸 规则 还 是 和 内 联 状 态 下 一 致 ， 
因此 ， 图 片 呈 现 的 宽 高 还 是 256 像 素 x192 像 素 。 这 也 是 为 何 图 片 以 及 其 
他 表单 类 替换 元 素 设置 display:block 宽 度 却 没有 100% 容 器 的 原因 。 








如 采 单 看 规则 ， 似 乎 面面俱到 ， 无 懈 可 击 。 但 是 ， 实 际 上 ， 意 外 还 
是 发 生 了 ， 这 个 意外 就 是 最 常用 的 <img> 元 素 。 如 果 任 何 尺 寸 都 没有 ， 
则 元 素 应 该 是 300 像 素 x150 像 素 ， 这 条 规则 <video>、<canvas> 和 
<iframe> 这 些 元 系 都 符合 ， 唯 独 图 片 例外 。 如 下 : 


这 段 HIML 表 示 一 个 没有 蔡 换 内 容 也 没有 尺寸 设 定 的 裸露 的 Cimg> 
元 素 。 按 照 规 范 尺 寸 应 该 是 300 像 素 x 150 像 素 ， 结 果 不 仅 不 是 这 个 尺 
寸 ， 而 且 各 个 浏览 器 下 的 尺寸 还 不 一 样 。 正 浏览 器 下 是 28x30， 如 图 4-2 
所 示 。Chrome 浏 览 器 下 是 0x0， 如 图 4-3 所 示 。Firefox 浏 览 器 下 显示 的 是 
0x22， 如 图 4-4 所 示 。 














图 4-2 ”了 正 浏 览 器 图 片 默认 尺寸 





图 4-3 Chrome 浏览 器 图 片 默认 尺寸 





图 4-4 ”Firefox 浏 览 嚣 图片 默认 尺寸 


其 实 尺 寸 不 一 样 不 打 紧 ， 因 为 我 们 平时 使 用 都 会 设置 尺寸 ， 不 可 能 
像 这 样 放任 不 管 ， 但 是 ， 如 果 表 现 型 也 不 一 样 ， 那 就 抹 烦 了 。 我 们 从 一 
个 常用 功能 的 前 端 小 技巧 说 起 。 





Web 开 发 的 时 候 ， 为 了 提高 加 载 性 能 以 及 节约 带宽 费用 ， 首 屏 以 下 


的 图 片 就 会 通过 滚屏 加 载 的 方式 异步 加 载 ， 然 后 ， 这 个 即将 被 异步 加 载 
的 图 瞩 为 了 布局 稳健 、 体 验 恨 好 ， 人 往往 会 使 用 一 张 透 明 的 图 片 占 位 。 例 
如 : 


实际 上 ， 这 个 透明 的 占 位 图 片 也 是 多 余 的 资源 ， 我 们 直接 : 


然后 配合 下 面 的 CSS 可 以 实现 一 样 的 效果 : 





img { visibility: hidden; } 


img[src] { visibility: visible; } 








注意 ， 这 里 的 <img> 直 接 没有 src 属 性 ， 再 强调 一 遍 ， 是 直接 没 

` 是 src=""，src="" 在 很 多 浏览 器 下 依然 会 有 请 求 ， 而 且 请 求 的 
页 面 数据 。 当 图 片 的 src 属 性 缺 省 的 时 候 ， 图 片 不 会 有 任何 请 

最 高 效 的 实现 方式 。 


当 





是 当前 
求 ， 是 
理论 再 次 无 懈 可 击 ， 然 而 ， 正 如 之 前 提 到 的 , “似乎 Firefox 浏 览 器 
在 将 换 元 素 的 内 联 表 现 这 一 块 还 是 有 些 自己 的 想法 的 ”。 对 于 Firefox 浏 
览 医 ， ea 而 是 一 个 普通 的 内 联 元 素 ， 所 
以 使 用 的 融 不 是 蕉 换 元 素 的 尺寸 规则 ， 而 是 类 似 <span> 的 内 联 元 素 尺 
寸 规则 ， 宽 高 会 无 效 。 因 此 ; 


img { width: 266px; height: 156px; } 
<img> 


在 正和 Chrome 浏 览 器 下 都 按照 预期 图 片 尺 寸 200 像 素 x150 像 素 ， 但 





是 ，Firefox 浏 览 器 却 纹 丝 不 动 ， 依 然 是 默认 图 片 尺寸 ， 这 就 比较 尴 炊 
了 ， 好 在 要 修复 此 兼容 性 问题 很 简单 ， 只 需 直接 设置 ; 


就 理解 为 <span> 标 签 设置 display:inline-block 后 可 以 设置 宽 
高 就 可 以 了 。 这 个 针对 Firefox 浏 览 器 的 修复 既 有 效 ， 又 对 其 他 浏览 器 的 
图 片 表现 没有 任何 影响 ， 因 此 ， 我 建议 在 CSS 重 置 的 时 候 加 上 下 面 这 
行 : 
ling { display: inline-blocg | 


接 下 来 ， 我 们 继续 深入 蔡 换 元 素 的 尺寸 规则 。 











CSS 世 界 中 的 奉 换 元 系 的 固有 尺寸 有 一 个 很 重要 的 特性 ， 那 就 
是 “我 们 是 无 法 改变 这 个 蔡 换 元 素 内 容 的 固有 尺寸 的 ”。 














我 们 平常 打交道 的 图 片 的 尺寸 规则 是 “默认 的 宽 高 设置 会 覆盖 回 有 
尺寸 "， 因 此 ， 我 们 可 能 会 误 认 为 我 们 的 宽 高 设置 修改 的 是 图 片 的 固有 
尺寸 ， 实 际 上 并 不 是 。 要 证 明 这 一 观点 ， 我 们 可 以 借助 非 蔡 换 元 素 
的 : :before 或 : :after 仿 元素 。 例 如 ， 如 果 有 下 面 的 代码 : 


div:before { 
content: url(1.jpg); 


display: block; 
width: 266px; height: 266pX; 
} 








此 时 : :before 伪 元 素 呈现 的 图 片 的 宽 高 是 多 少 ? 





很 多 人 会 按照 经 验 认 为 是 200 像 素 x200 像 素 ， 非 也 ! 实际 上 ， 这 里 


的 图 片 尺寸 是 1.jpg 这 张 图 片 的 原始 尺寸 大 小 256 像 素 x192 像 素 ，width 
和 height 属 性 都 被 直接 无 视 了 。 这 就 是 我 上 面 所 说 的 ， 在 CSS 世 界 中 ， 
图 片 资 源 的 固有 尺寸 是 无 法 改变 的 ! 





眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/4/1-1.php 或 者 扫 右 侧 的 
二 维 人 码 。 








可 以 看 到 图 片 是 按照 原始 尺寸 展示 的 《如 图 4-5 所 示 ) ， 并 不 是 CSS 
设 定 的 200 像 素 x200 像 素 ，200 像 素 仪 仅 是 设 定 了 content box 尺 寸 ， 对 
content 生 成 图 片 资 源 并 没有 任何 影 啊 。 





我 们 再 回 到 <img> 元 系 ， 既 然 图 片 的 固定 尺寸 不 受 CSS 宽 高 控制 ， 
那 为 何 我 们 设 定 width 和 height 会 影响 图 片 的 尺寸 呢 ? 


我 就 不 卖 天 子 了 ， 那 是 因为 图 片 中 的 content 输 换 内 容 默 认 的 适 配 
方式 是 填充 〈fil1) ， 也 就 是 外 部 设 定 的 矿 寸 多 大 ， 我 就 填 满 、 跟 着 一 
样 大 。 换 句 话 说 ， 尺 寸 变 化 的 本 质 并 不 是 改变 固有 尺寸 ， 而 是 采用 了 十 








充 作 为 适 配 HTML 尺 寸 和 CSS 尺 寸 的 方式 ， 且 在 CSS3 之 前 ， 此 适 配 方式 
是 不 能 修改 的 。 


在 CSS3 新 世界 中 ，<img> 和 其 他 一 些 蔡 换 元 素 的 蔡 换 内 容 的 适 配 方 
式 可 以 通过 object-fit 属 性 修改 了 。 例 如 ，<img> 元 系 的 默认 声明 
是 object-fit:fil1， 如 果 我 们 设置 object-fit:none， 则 我 们 图 片 
的 尺寸 就 完全 不 受 控 制 ， 表 现 会 和 非 蔡 换 元 素 : :before 生 成 的 图 片 尺 
寸 类 似 ;， 如 果 我 们 设置 object-fit:contain， 则 图 片 会 以 保持 比例 图 
片 ， 尽 可 能 利用 HIML 尺 寸 但 又 不 会 超出 的 方式 显示 ， 有 些 类 似 于 
background-size:contain 的 呈现 原理 ， 如 果 此 时 我 们 设 定 <img> 元 
素 的 width 和 height 都 是 200 像 素 ， 则 会 呈现 图 4-6 所 示 的 上 自动 垩 直 居 中 
效果 。 





图 4-5 ”content 生成 的 图 片 宽 高 设置 无 效 





图 4-6 object-fit:contain 下 的 图 片 效果 





object-fit 还 有 其 他 一 些 属性 值 ， 但 本 书 不 会 展开 介绍 CSS3 内 
容 ， 因 此 点 到 为 止 ， 有 兴趣 的 读者 可 以 读 我 的 博客 文 


ee 


草 : http://www.zhangxinxu.com/wordpress/?p=4676。 








4. 答 换 元 素 和 非 答 换 元 素 的 距离 有 多 远 


图 片 可 以 说 是 最 典型 最 闻 用 的 苦 换 元 素 卫 ， 因 此 ， 本 节 依 然 以 图 片 
为 代表 来 深入 答 换 元 素 的 “内 心 世 界 ”。 


仙 侠 小 说 世界 中 有 正道 和 魔道 ， 看 似 势 不 两 立 ， 但 其 实 并 无 本 质 差 
别 ， 稍 不 留神 可 能 就 会 变 成 大 道 中 人 。CSS 世 界 中 的 蔡 换 元 系 和 非 蔡 换 
元 素 看 上 去 也 是 两 个 对 立 的 派别 ， 立 场 清晰 ， 区 分 明显 ， 老 死 不 相 往 来 
的 感觉 ， 但是， 一 旦 深入 研究 我 们 就 会 及 现 ， 两 者 之 间 的 距离 要 比 我 们 
所 有 人 想象 得 都 要 近 ! 





观点 1: 蔡 换 元 素 和 非 蔡 换 元 素 之 间 只 隔 了 一 个 src 属 性 ! 


由 于 我 们 平时 使 用 图 片 肯定 都 会 使 用 src 属 性 ， 所 以 难免 会 思维 定 
式 ， 认 为 <img> 等 同 于 图 片 ， 实 际 上 完全 不 是 的 。 如 采 我 们 把 src 属 性 


去 挥 ，<img> 其 实 束 是 一 个 和 <span> 类 似 的 普通 的 内 联 标 签 ， 也 就 是 成 
了 一 个 非 蔡 换 元 素 。 


非常 有 想法 的 Firefox 浏 览 器 很 好 地 证 实 了 这 一 点 。 例 如 ， 对 于 以 下 
CSS 和 HTML 人 代码， 最 后 图 片 宽 度 是 多 少 ? 








img { 
display: block 


outline: 1px solid; 








按照 蔡 换 元 又 的 尺寸 规则 ， 宽 度 应 该 是 e， 但 实际 上 ， 在 Firefox 浏 
览 右 下 ， 最 终 的 宽度 是 100% 上 自 适 应 父 容器 的 可 用 宽度 的 。 其 表现 和 普 
通 的 <span> 类 似 ， 已 经 完全 不 是 蔡 换 元 素 了 。 大 家 应 该 都 知 
道 ，<span> 标 签 设置 width 和 height 是 无 效 的 ， 所 以 大 家 应 该 明白 为 何 
Firefox 浏 览 嚣 下 <img> 设 置 width 和 height 不 起 作用 了 吧 。 


Firefox 浏 览 器 的 案例 很 好 地 证 明了 “如 果 图 片 没 有 蔡 换 内 容 ， 图 片 
就 是 一 个 普通 的 内 联 标签 ”。 








Chrome 浏 览 右 其 实 也 有 类 似 的 表现 ， 只 是 需要 特定 的 条 件 触发 而 
己 ， 这 个 触发 条 件 就 是 需要 有 不 为 空 的 alt 属 性 值 。 例 如 : 


<img alt=" 任 意 值 "> 








此 时 ，Chrome 这 个 <img> 宽 度 也 是 100% 容 器 。 假 设 我 们 容器 宽度 470 像 
素 ， 则 效果 就 是 图 4-7 所 示 的 样子 。 完 全 就 是 非 蔡 换 元 素 的 表现 吧 。 


但 是 ， 如 果真 是 这 样 ， 那 为 何 正 浏览 器 没有 src 属 性 还 是 完全 的 蔡 








换 元 素 表 现 呢 ? 原因 就 在 于 正 浏览 器 中 有 个 默认 的 Ne 内 容 ， 

当 src 属 性 缺失 的 时 候 ， 会 使 用 这 个 默认 的 占 位 内 容 ， 这 也 是 下 浏览 器 

下 默认 <img> 尺 寸 是 28x30 而 不 像 Chrome 浏 览 器 那样 为 0x0 的 原因 所 在 。 

加 高 版 本 的 下 浏览 器 下 ， 这 个 占 位 的 替换 内 容 似 乎 做 了 透明 处 理 ， 但 
， 在 原生 的 下 8 浏览 器 下 ， 这 个 占 位 内 容 却 全 然 肾 露 了 ， 见 图 4-8。 


图 4-7 容器 宽度 470 像 素 的 效果 








图 4-8 IE 浏览 器 cimg> 占 位 内 容 
大 家 仔细 观察 会 发 现 此 占 位 内 容 中 那个 图 片 的 小 图 标 是 完整 的 ， 不 


征 图 片 src 不 合法 出 现 的 破裂 小 图 标 或 者 带 又 号 的 图 标 ， 需 要 注意 区 
别 ， 别 混 消 了 。 





男 外 一 个 可 以 很 好 证 明 “ 蔡 换 元 素 和 非 蔡 换 元 取 区 别 就 在 于 src 属 
性 ”的 点 是 “基于 伪 元 素 的 图 片 内 容 生 成 技术 ”。 用 一 句 更 易 懂 的 话 描 述 
就 是 ， 我 们 可 以 对 <img> 元 素 使 用 : :before 和 : :after 伪 元 素 进 行内 容 
生成 以 及 样式 构建 ， 但 是 这 种 方法 文 持 是 有 限制 的 。 上 站 先是 兼容 性 问 
题 ， 根 据 我 的 测试 ， 目 前 Chrome 和 Firefox 等 浏览 器 文 持 ， 但 下 浏览 器 不 
支持 ， 其 次 ， 要 想 让 Chrome 或 Firefox 等 浏览 器 生效 ， 还 有 其 他 一 些 需要 
注意 的 技术 点。 




















(1) 不 能 有 src 属 性 (证明 观 点 的 关键 所 在 〉; 


(2) 不 能 使 用 content 属 性 生成 图 片 (针对 Chrome) ; 





(3) 需要 有 alt 属 性 并 有 值 〈 针 对 Chrome) ; 


(4) Firefox 下 : :before 伪 元 素 的 content 值 会 被 无 视 ，: :after 
无 此 问题 ， 应 该 与 Firefox 自 己 占用 了 ::before 伪 元 素 的 content 属 性 有 
关 。 


里 然 “ 基 于 伪 元 素 的 图 片 内 容 生 成 技术 ”并 不 属于 实用 技术 ， 但 是 ， 
实际 网 页 开发 的 时 候 ， 会 有 一 些 场 景 必须 使 用 <img> 标 签 ， 此 时 ， 这 些 
隐蔽 的 技术 往往 就 会 有 神 迹 表现 。 我 这 里 举 个 小 例子 抛砖引玉 一 下 ， 上 
一 小 市 提 到 使 用 缺 省 src 的 <img> 元 系 实 现 深 屏 加 载 效 果 ， 但 是 ， 就 有 
可 能 存在 这 样 一 个 体验 问题 : 如 果 我 们 的 JavaScript 加 载 比 较 慢 ， 我 们 的 
页 面 就 很 有 可 能 出 现 一 块 一 块 白 色 的 图 片区 域 ， 纯 白色 的 ， 没 有 任何 信 
恩 ， 用 户 完 全 不 知道 这 里 的 内 容 是 什么 。 虽 然 alt 属 性 可 以 提供 描述 信 
恩 ， 但 由 于 视觉 效果 不 好 ， 和 被 隐藏 卸 了 。 此 时 ， 我 们 总 不 免 畅想 : 要 证 
在 图 片 还 没 加 载 时 就 把 alt 信 息 呈 现 出 来 该 多 好 啊 。 














藉 喜 你 可 以 美梦 成 真 ! 办 法 就 是 使 用 这 里 的 “基于 伪 元 素 的 图 片 内 
容 生成 技术 ”。 


在 Chrome 或 Firefox 浏 览 器 下 访问 http://demo.cssworld.cn/4/ 1-2.php。 
进入 此 演示 页 面 ， 我 们 鼠标 经 过 中 间 的 色 块 区 域 的 时 候 会 发 现 ， 有 一 个 
带 有 文字 信息 的 半 透 明 黑 色 条 目 出 现 了 ， 如 图 4-9 所 示 。 








R 


图 4-9 alt 信 息 美 美 地 显示 


此 时 ， 图 片 src 没 有 ， 因 此 ，: :before 和 : :after 可 以 生效 ， 我 们 
就 可 以 把 alt 属 性 值 通过 content 属 性 呈现 出 来 ， 核 心 CSS 代 码 如 下 : 


img: :after { 
/* 生成 alt 信 息 */ 
content: attr(alt) 
/* 尺寸 和 定位 */ 
position: absolute; bottom: ©; 
width: 1662%; 
background-color: rgba(0,060,0,.5); 


transform: translateY(10606%); 
/* 来 点 过 渡 动 画 效 果 */ 


transition: transform .2s; 


hover::after { 
/* alt 信 息 显 示 */ 
transform: translateY(6); 





下 面 是 此 技术 最 有 意思 的 部 分 。 当 我 们 点 击 按钮 给 图 片 添加 一 
个 src 地 址 时 ， 图 片 从 普通 元 素 变 成 替换 元 素 ， 原 本 都 还 支持 
的 : :before 和 : :after 此 时 全 部 无 效 ， 此 时 再 hover 图 片 ， 是 不 会 有 任 
何 信息 出 现 的 〈《 见 图 4-10) 。 于 是 就 非常 巧妙 地 增强 了 图 片 还 没 加 载 时 
的 信息 展示 体验 。 


比 夺 无 信息 汗 观 
四 





图 4-10 src 属性 存在 时 候 :beforey/ :after 失 效 





细 细 体味 会 发 现 ， 这 一 体验 增强 实现 非常 巧妙 地 利用 了 蔡 换 元 素 的 
各 种 特性 表现 ， 并 且 在 HIML 层 面 并 没有 任何 其 他 代码 或 内 容 的 辅助 ， 
可 谓 是 非常 高 性 价 比 的 技术 实现 ， 大 家 不 妨 在 自己 的 项 目 中 小 试 一 下 。 





观点 2: 蔡 换 元 素 和 非 蔡 换 元 素 之 间 只 隔 了 一 个 CSS content 属 
性 ! 


蔡 换 元 素 之 所 以 为 蔡 换 元 素 ， 就 是 因为 其 内 容 可 蔡 换 ， 而 这 个 内 容 
就 是 margin、border、padding 和 content 这 4 个 盒子 中 的 content 
box， 对 应 的 CSS 属 性 是 content， 所 以 ， 从 理论 层面 讲 ，content 属 性 
决定 了 是 替换 元 素 还 是 非 蔡 换 元 素 。 


理论 太 虚 ， 我 们 还 是 看 一 些 有 趣 的 真实 案例 吧 。 在 开始 之 前 ， 我 们 
需要 感谢 Chrome 浏 览 器 ，Chrome 浏 览 器 的 泻 染 表现 帮助 我 们 更 好 地 理 
解 了 蔡 换 元 素 。 什 么 表现 呢 ? 就 是 在 Chrome 浏 览 器 下 ， 所 有 的 元 双 都 
文 持 content 属 性 ， 而 其 他 浏览 器 仅 在 : :before/: :after 伪 元 素 中 才 
有 文 持 。 因 此 ， 下 面 的 所 有 案例 ， 请 在 Chrome、Safari、Opera 等 浏览 器 





下 查看 。 


前 面 已 经 证 明了 ， 没 有 src 属 性 的 <img> 是 非 蔡 换 元 素 ， 但 是 ， 如 
果 我 们 此 时 使 用 content 属 性 给 它 生 成 一 张 图 片 呢 ? 


img { content: url(1.jpg); } 
<img> 


结果 和 下 和 面 HTML 的 视觉 效果 一 模 一 样 : 








<img src="1.jpg"> 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/4/1-3.php 或 者 扫 下 面 的 
二 维 码 。 结 果 图 片 都 正常 显示 了 ， 如 图 4-11 所 示 ， 且 各 种 表现 都 符合 蔡 
换 元 素 ， 如 斥 寸 规则 ， 或 者 不 文 持 : :before/::after 伪 元 素 等 。 





1. 常规 实现 2. content 属 性 实现 


<img src="1.jpg"> <img> 


img:hot([src]) { 
content: url(1.jpg); 





图 4-11 content 属 性 直接 生成 图 片 演示 截图 








另外 还 有 一 点 很 有 意思 ， 如 宁 图 片 原 来 是 有 src 地 址 的 ， 我 们 也 和 是 
可 以 使 用 content 属 性 把 图 片 内 容 给 置换 掉 的 ， 于 是 ， 我 们 惑 能 轻松 实 
现 hover 图 片 变 成 力 外 一 张 图 片 的 效果 。 例 如 : 


<img src="laugh.png"> 
img:hover { 


content: url(laugh-tear.png); 


} 





实例 可 以 手动 输入 http://demo.cssworld.cn/4/1-4.php 或 者 扫 下 面 的 二 
维 码 访问 。 该 实例 中 ， 我 们 鼠标 经 过 笑脸 ， 笑 脸 会 诡 出 眼泪 ( 见 图 4- 
12) ， 怠 是 通过 CSS 的 content 属 性 直接 苦 换 <img> 的 谷 换 内 容 实现 
的 。 要 是 放 在 以 前 ， 我 们 只 能 借助 background-image 或 者 两 个 <ijmg> 
元 素 显 隐 控 制 实现 。 











图 4-12 ”鼠标 经 过 变 成 笑 泪 图 片 











然后 ， 还 有 一 点 有 必要 说 明 一 下 ，content 属 性 改变 的 仅仅 是 视觉 
呈现 ， 当 我 们 以 右键 或 其 他 形式 保存 这 张 图片 的 时 候 ， 所 保存 的 还 是 原 
来 src 对 应 的 图 片 。 


不 仅 如 此 ， 使 用 content 属 性 ， 我 们 还 可 以 让 普通 标签 元 素 变 成 替 
换 元 素 。 举 个 例子 ， 官 网 的 标志 往往 都 会 使 用 <h1> 标 签 ， 里 面 会 有 网 站 
名 称 和 标志 图 片 使 用 背景 图 ， 类 似 下 面 的 代码 : 








<h1>《CSS 世 界 》</h1> 
hi { 
width: 186px; 
height: 36px; 
background: 0 png); 
/* 隐藏 文字 * 
text-indent: es 





下 面 展示 一 个 创新 的 方法 ， 大 家 可 以 在 移动 端 试 试 。 还 是 一 样 的 
HTML 人 代码， 但 是 CSS 代 码 微 调 了 一 下 : 
h1 { 


content: url(logo.png); 
} 


没 错 ， 只 要 一 行 CSS 就 可 以 实现 我 们 想 要 的 效果 了 。 为 了 证 明 我 不 
是 在 打 许 语 ， 我 特意 制作 了 演示 页 面 ， 可 以 手动 输入 


http:/demo.cssworld.cn/4/1-5.php 或 者 扫 下 面 的 二 维 码 。 效 果 如 图 4-13 所 
示 ， 可 以 看 到 没有 文字 ， 只 有 图 片 。 








4 Css 忆 > 

















图 4-13 ”content 轻 松 实现 文字 变 图 片 








ee 传统 CSS 代 码 的 <h1> 是 一 个 普通 元 素 ， 因 此 需 
定 尺 寸 隐 藏 文字 ; 但是， 后面 使 用 content 属 性 实现 ，<h1> 分 分 钟 





就 变 成 了 丛 换 元 素 ， 文 字 目 动 被 普 换 ， 同 时 斥 二 规则 束 是 丛 换 元 际 的 矿 
十 规则， 完美 适应 原始 图 片 大 小 。 


此 外 ， 虽 然 视 觉 上 文字 被 替换 了 ， 但 是 屏幕 阅读 设备 阅读 的 还 是 文 
字 内 容 ， 搜 索引 擎 SEO 抓 取 的 还 是 原始 的 文本 信息 ， 因 此 ， 对 页 面 的 可 
访问 性 等 没有 任何 影响 。 看 起 来 这 是 一 个 完美 的 文字 换 图 显示 方案 ， 但 
还 是 有 一 些 局 限 。 前 文 也 说 到 了 ， 蔡 换 元 素 的 固有 尺寸 是 无 法 设置 的 ， 
如 今 在 移动 端 retina 屏 幕 几乎 是 标 配 ， 为 了 图 片 显示 细腻 ， 往 往 真实 图 
片 尺寸 是 显示 图 片 尺寸 的 两 倍 。 于 是 问题 就 来 了 ， 使 用 content 生 成 图 
片 ， 我 们 是 无 法 设置 图 片 的 尺寸 的 ， 只 能 迫不得已 使 用 一 倍 图 ， 然 后 导 
致 图 片 看 上 去 有 点 儿 模糊 。 












































所 以 ， 要 想 在 移动 端 使 用 该 拉 术 ， 建 议 使 用 SVG 矢 量 图 片 。 例 如 : 


hi { 
content: url(logo.svg); 





好 了 ， 最 后 和 标题 再 呼应 下 ， 蔡 换 元 素 和 非 蔡 换 元 素 的 距离 有 多 
远 ? 就 是 src 或 content 那 一 点 。 


5. content 与 蔡 换 元 素 关 系 剖 析 


从 前 一 节 大 家 一 定 早 就 看 出 content 属 性 和 替换 元 素 之 间 有 着 非常 
微妙 的 联系 了 。 实 际 上 ， 在 CSS 世 界 中 ， 我 们 把 content 属 性 生成 的 对 
象 称 为 “匿名 蔡 换 元 素 ”(anonymous replaced element) 。 看 到 没 ， 直 接 
就 * 蔡 换 元 素 ” 叫 起 来 了 ， 可 见 ， 它 们 之 间 的 联系 并 不 是 微妙 ， 而 是 赤裸 
裸 。 











content 属 性 生成 的 内 容 部 是 玲 换 元 素 ? 没 错 ， 融 是 答 换 元 素 ! 


也 正 是 这 个 原因 ，content 属 性 生成 的 内 容 和 普通 元 素 内 容 才 会 有 
很 多 不 同 的 特性 表现 。 我 这 里 举 几 个 简单 的 例子 。 


(1) 我 们 使 用 content 生 成 的 文本 是 无 法 选中 、 无 法 复制 的 ， 好 
像 设置 了 user- select:none 声 明 一 般 ， 但 是 普通 元 又 的 文本 却 可 以 被 轻 
松 选中 。 同 时 ，content 生 成 的 文本 无 法 被 屏幕 岗 读 设备 恋 取 ， 也 无 法 
被 搜索 引擎 抓 取 ， 因 此 ， 生 万 不 要 自以为是 地 把 重要 的 文本 信息 使 
用 content 属 性 生成 ， 因 为 这 对 可 访问 性 和 SEO 都 很 不 友好 ，content 
属性 只 能 用 来 生成 一 些 无 关 紧 要 的 内 容 ， 如 装饰 性 图 形 或 者 序号 之 类 ; 
同样 ， 也 不 要 担心 原本 重要 的 文字 信息 会 被 content 蔡 换 ， 蔡 换 的 仅仅 


下 > 站 人 FI 
是 视觉 层 。 














这 里 有 人 可 能 会 反 驶 : content 内 容 无 法 复制 也 可 能 是 伪 元 素 的 原 
因 ， 而 不 是 蔡 换 元 素 的 原因 。 要 回答 这 个 问题 ， 我 们 可 以 将 其 与 同样 是 
替换 元 素 的 : :first-letter 对 比 一 下 。 在 正和 Firefox 浏 览 器 
下 ，: :first-letter 伪 元 素 内 容 都 是 可 以 被 选中 的 ， 但 
是 ::before/::after 内 容 却 无 法 选中 。 由 此 可 见 ， 文 字 无 法 选中 多 半 
是 content 的 原因 ， 而 非 仿 元素。 








(2) 不 能 左右 :empty 伪 类 。:empty 是 一 个 CSS 选 择 器 ， 当 元 素 里 
面 无 内 容 的 时 候 进 行 匹 配 。 例 如 ， 下 面 的 HIML 和 CSS 人 代码: 


<div> 有 内 容 </divy> 
<div></div> 


div { padding: 16px; border: 16px solid #cd6666; } 
div:empty { border-style: dashed; } 





前 面 一 个 <div> 是 实 线 边 框 ， 而 后 面 的 ， 因 为 里 面 无 内 容 ， 所 以 就 是 虚 


线 边 框 。 
接 下 来 ， 我 们 使 用 content 属 性 给 <div> 生 成 一 些 文字 ， 例 如 : 


div::after { content: " 伪 元 素 生 成 内 容 "; } 





结果 看 上 去 好 像 <div> 里 面 出 现 了 文字 内 容 ， 实 际 上 ， 还 是 当成 
了 :empty， 最 终 效 果 如 图 4-14 所 示 ， 是 一 个 虚 框 。 手 动 输入 
http://demo.cssworld.cn/4/1-6.php 或 者 扫 下 面 的 二 维 码 。 








图 4-14 ”content 无 法 影响 :empty 选 择 器 


(3) content 动 态 生 成 值 无 法 获取 。content 是 一 个 非常 强大 的 
CSS 属 性 ， 其 中 一 个 强大 之 处 就 是 计数 鼎 效 果 ， 可 以 自动 系 加 数值 ， 例 
如 ， 图 4-15 中 的 数字 3 就 是 content 动 态 生 成 的 (具体 参考 4.1.2 节 计数 器 


部 分 ) 。 


下 面 中 国 十 大 冰淇淋 你 吃 过 几 个 ? 


哈 根 达 斯 

和 路 二 wall's 

八 襄 水 湛 淋 

DQ 冰 淇 淋 

蒙牛 冰淇淋 
吕 全 党 冰淇淋 
伊利 冰 湛 淋 
乐 可 可 冰淇淋 
新 城市 冰淇淋 
明治 MEUI 


mm 本 wb 


PN 
«| < 


上 
SS 


你 总 共 选 择 了 3 款 冰 湛 淋 ! 


图 4-15 ”content 属 性 动态 生成 数值 
核心 CSS 代 人 码 如 下 : 


.total::after { 
content: counter(icecream); 


} 
我 们 是 无 法 获得 此 时 content 对 应 的 具体 数值 是 多 少 的 ， 一 点 儿 办 


法 都 没有 。getComputedStyle 方 法 可 以 获得 伪 元 素 的 计算 样式 。 但 
是 ， 得 到 的 只 是 纯粹 的 content 在 CSS 文 件 中 的 属性 值 。 例 如 ， 这 里 : 





var dom = document.querySelector(".total"), 





window.getComputedstyle(dom ，"::after").content;  // 结果 是 : "counter(ice 
cream)" 





结果 是 "counter(icecream)"， 而 不 是 数值 3。 


当然 ，content 生 成 内 容 还 有 其 他 很 多 和 普通 元 素 不 一 样 的 特性 ， 
驶 不 一 一 介绍 了 ， 我 们 不 妨 把 更 多 注意 力 放 在 下 一 节 内 容 上 ， 即 
与 content 属 性 相关 的 实用 技术 。 





4.1.2 content 内 容 生 成 技术 





在 实际 项 目 中 ，content 属 性 几乎 都 是 用 在 : :before/::after 这 
两 个 伪 元 素 中 ， 因 此 ，“content 内 容 生 成 技术 ”有 时 候 也 称 
为 “: :before/::after 伪 元 素 技 术 ”。 





提前 说 明 一 下 ， 因 为 本 书目 标 浏 览 器 是 IE8 及 以 上 版 本 浏览 器 ， 而 
IE8 浏 览 器 仅 支 持 单 冒号 的 伪 元 素 ， 所 以 下 面 内 容 代 码 示 意 部 分 全 部 使 
用 单 冒 号 


1. content 辅 助 元 素 生 成 








此 应 用 的 核心 点 不 在 于 content 生 成 的 内 容 ， 而 是 伪 元 素 本 身 。 通 
常 ， 我 们 会 把 content 的 属性 值 设 置 为 空 字 符 串 ， 像 这 样 : 





.element :before { 
content: "" 


} 


Pf 和 


只 要 是 空 字 符 串 就 可 以 ， 我 曾 多 次 见 到 有 人 设置 为 content:'.'， 这 
全 没有 必要 的 。 


完全 
TU 


然后 ， 利 用 其 他 CSS 代 码 来 生成 辅助 元 素 ， 或 实现 图 形 效果 ， 或 实 
现 特定 布局 。 与 使 用 显 式 的 HTML 标 签 元 素 相 比 ， 这 样 做 的 好 处 是 
HTML 代 码 会 显得 更 加 干净 和 精简 。 





图 形 效 果实 现 跟着 设计 走 ， 不 具有 兽 适 性 ， 这 里 不 介绍 。 重 点 说 说 
辅助 元 素 在 布局 中 的 应 用 。 其 中 ， 最 常见 的 应 用 之 一 就 是 清除 浮动 带 来 
的 影响 : 





.Clear:after { 


content: ''; 
display: table; /* 也 可 以 是 'block' */ 
clear: both ; 


} 





男 外 一 个 很 具有 代表 性 的 应 用 就 是 辅助 实现 “两 端 对 齐 ” 以 及 “和 王 直 
居中 /上 边缘 /下 边缘 对 齐 ” 效 果 。 我 们 不 妨 来 看 一 个 二 合 一 的 实例 ， 手 动 
输入 http://demo.cssworld.cn/4/1-7.php 或 者 扫 右 侧 的 三 维 码 。 此 实例 演示 
是 一 个 自动 等 宽 布 局 且 底 部 对 齐 的 柱状 图 ， 默 认 展 示 了 4 项 ， 如 图 4-16 
所 示 。 当 我 们 动态 插入 更 多 柱子 元 素 ， 布 局 依然 智能 均 分 剩余 空间 ， 活 
脱 脱 一 个 弹性 盒子 布局 ， 效 果 如 图 4-17 所 示 ， 而 且 此 方法 所 有 浏览 器 全 
兼容 。 

















图 4-16 ”4 个 柱 形 图 效果 


图 4-17 ”10 个 柱 形 图 效果 





核心 CSS 代 码 如 下 : 





.box { 
width: 256px; height: 256px; 
/* 两 端 对 齐 关键 */ 
text-align: justify; 


.box:before { 
content: 
display: inline-block; 
height: 1662%; 


nn 。 
Es; 


.box:after { 
content: ""; 
display: inline-block; 
width: 166%; 


} 

.bar { 
display: inline-block; 
width: 26px; 

} 





对 应 的 HTML 代 码 如 下 : 


<div class="box"><i class="bar"></i> 
<i class="bar"></i> 


<i class="bar"></i> 
<i class="bar"></i> 
</div> 








至 于 实现 原理 ，:before 伪 元 素 用 于 辅助 实现 后 对 齐 ， 深 入 内 容 可 
参见 5.3 节 ; :after 伪 元 素 用 于 辅助 实现 两 端 对 齐 ， 深 入 内 容 可 参见 8.6 
节 ， 这 里 不 展开 讲解 。 





这 一 方法 的 最 大 好 处 是 足够 兼容 ， 如 有 果 想 要 兼容 了 正 7 浏 览 需 ， 直 接 
使 用 标签 元 素 即 可 ， 但 这 种 方法 也 有 不 足 之 处 ， 就 是 HITML 代 码 需要 注 
意 有 些 地 方 不 能 换行 或 者 空格 ， 有 些 地 方 则 必须 要 换行 或 者 有 空格 ， 这 
在 多 人 协作 的 时 候 就 容易 出 问题 。 例 如 ， 开 发 人 员 豆 欢 编 辑 器 的 HTML 
格式 化 功能 ， 然 后 标签 自动 换行 ， 于 是 样式 就 会 出 现 悠 着， 所以， 一 定 
记得 在 HIML 代 码 中 写 上 明确 的 注释 一 一 “这 里 千 万 不 能 换行 ”， 或 者 类 
似 这 种 。 

















2. content 字 符 内 容 生成 





content 字 符 内 容 生 成 就 是 直接 写 入 字符 内 容 ， 中 英文 都 可 以 ， 比 
较 常 见 的 应 用 就 是 配合 Qfont-face 规 则 实现 图 标 字体 效果 。 例 如 ， 下 





面 这 个 例子 : 


@font-face { 
font-family: "myico"; 
src: Url("/fonts/4/myico.eot"); 
src: url("/fonts/4/myico.eot#iefix") format("embedded-opentype"), 
url("/fonts/4/myico.ttf") format("truetype"), 
url("/fonts/4/myico.woff") format("woff"); 


} 

.ijcon-home:before { 
font-size: 64px; 
font-family: myico; 
content: "家 "; 

} 


<span class="icon-home"></span> 








此 时 ， 页 面 显 示 的 可 能 就 不 是 一 个 “家 ”* 字 ， 而 是 一 个 图 标 ， 如 图 4-18 所 
示 。 上 面 的 例子 有 对 应 的 实例 页 面 ， 手 动 输入 
http://demo.cssworld.cn/4/1-8.php 或 者 扫 下 面 的 二 维 码 。 














图 4-18 “家 ” 字 显 示 成 了 一 个 房屋 图 标 


另外 一 个 值得 介绍 的 点 就 是 ， 除 常规 字符 之 外 ， 我 们 还 可 以 插入 
Unicode 字 符 ， 比 较 经 典 的 就 是 插入 换行 符 来 实现 某 些 布局 或 者 效果 。 
核心 CSS 代 码 如 下 : 





:after { 
content: '\A'; 


white-space: pre; 


} 





很 多 人 可 能 会 问 : 这 个 '\A' 是 什么 ?'\A' 其 实 指 的 是 换行 符 中 的 
LE 字符， 其 Unicode 编 码 是 866A， 在 CSS 的 content 属 性 中 则 直接 写 
作 '\A'; 换行 符 除了 LF 字符 还 有 CR 字符 ， 其 Unicode 编 码 是 60686D， 在 
CSS 的 content 属 性 中 则 直接 写作 '\D' 。CR 字 符 和 LF 字符 分 别 指 回 车 
CCR) 和 换行 (LF〉，content 字 符 生 成 强大 之 处 就 在 于 不 仅 普 通 字 
符 随 便 插 ，Unicode 字 符 也 不 在 话 下 。 





那 它 具体 有 什么 作用 呢 ? 很 显然 ， 作 用 就 是 换行 。 那 换行 又 有 什么 
用 呢 ? 确实 ， 很 多 时 候 ， 换 行 效果 看 上 去 没什么 特别 之 处 ， 我 在 HTML 
弄 个 <br> 标 签 不 是 照样 有 一 样 的 效果 ? 但 是 content 字 符 生 成 在 某 些 
场景 下 真 的 可 以 大 放 异 彩 ， 我 们 不 妨 看 下 面 这 个 配合 CSS3 animation 
用 来 实现 字符 动画 效果 的 例子 。 








我 们 动态 加 载 页 面 内容 的 时 候 ， 经 常会 使 用 “正在 加 载 中 ...” 这 几 个 
字 ， 基 本 上 ， 后 面 的 3 个 点 都 是 静态 的 。 静 态 的 问题 在 于 ， 如 果 网 络 不 
流畅 ， 加 载 时 间 比 较 长 ， 就 会 给 和 有 假死 的 感觉 但是， 如 末 是 点 点 所 
这 种 横向 的 动画 效果 ， 用 户 就 会 耐心 很 多 ， 体 验 也 会 好 很 多 ， 用 户 流失 
率 就 会 有 所 下 降 。 没 错 ， 我 们 可 以 利用 这 里 的 "\A "换行 特性 让 “.…” 这 几 





个 字符 动 起 来 ， HIML 和 CSS 代 码 如 下 : 


正在 加 载 中 <dot>. ..</dot> 

dot { 
display: inline-block; 
height: 1lem; 
line-height: 1; 
text-align: left; 
vertical-align: -.25em; 
overflow: hidden; 


:before { 

display: block; 

content: '...\A..\A.'; 

white-space: pre-wrap; 

animation: dot 3s infinite step-start both ; 


@keyframes dot { 
33% { transform: translateY(-2em); } 
66% { transform: translateY(-1lem); } 








效果 即 达 成 ，IE6 至 IE9 浏 览 器 下 是 静态 的 点 点 点 ， 文 持 animation 
动画 的 浏览 器 下 全 部 都 是 打点 loading 动 画 效果 ， 颜 色 大 小 可 控 ， 使 用 
非常 方便 。 寿 想 感受 效果 ， 可 以 手动 输入 http:/demo.cssworld.cn/4/1- 
9.php 或 者 扫 右 侧 的 二 维 码 。 








动画 实现 的 原理 不 难 理解 ， 插 入 3 行内 容 ， 分 别 是 3 个 点 、2 个 点 和 1 
个 点 ， 然 后 通过 transform 控 制 垂 直 位 置 ， 依 次 展示 每 一 行 的 内 容 。 


只 是 其 他 一 些 细节 怕 是 很 多 人 反而 有 疑问 。 
(1) 为 什么 使 用 <dot> 这 个 元 素 ? 
(2) 为 什么 使 用 : :before， 可 不 可 以 使 用 : :after? 


(3) 从 content 属 性 值 来 看 ， 是 3 个 点 在 第 1 行 ， 而 1 个 点 反而 在 最 
后 一 行 ， 为 什么 这 么 处 理 ? 


(4) 这 里 white-space 值 为 何 使 用 的 是 pre-wrap 而 不 是 pre? 
这 4 个 问题 的 答案 分 别 如 下 。 


(1) “dot> 是 目 定义 的 一 个 标签 元 素 ， 除 了 简约 、 语 义 化 明显 
外 ， 更 重要 的 是 方便 向 下 兼容 ， 正 8 等 低 版 本 浏览 器 不 认识 自 定义 的 





HTML 标 签 ， 因 此 ， 会 乖乖 地 显示 里 面 默 认 的 3 个 点 ， 对 我 们 的 CSS 代 码 
完全 忽略 。 


(2) 伪 元 素 使 用 : :before 同 时 display 设 置 为 block， 是 为 了 在 
高 版 本 浏览 器 下 原来 的 3 个 点 推 到 最 下 和 面 ， 不 会 影响 content 的 3 行内 容 
显示 ， 如 果 使 用 : :after 怕 是 效果 就 很 难 实现 了 。 








(3) 3 个 点 在 第 一 行 的 目的 在 于 兼容 了 9 浏览 器 ， 因 为 了 正 9 浏 览 右 认 
识 <dot> 以 及 ::before， 但 是 不 支持 CSS 新 世界 的 animation 属 性 ， 所 
以 ， 为 了 IE9 也 能 正常 显示 静态 的 3 个 点 ， 故 而 把 3 个 点 放 在 第 一 行 。 


(4) 这 里 的 white-space:pre-wrap 改 成 white-space:pre 效 果 
其 实 是 一 样 的 ， 之 所 以 使 用 pre-wrap 作 为 值 完 全 是 心情 使 然 。 关 于 两 
者 的 差异 本 书后 面 会 介绍 ， 这 里 先 不 用 深究 。 








还 有 最 后 儿 个 小 技巧 ， 首 先 ，'\A' 是 不 区 分 大 小 写 的 ;其 
次 ，"\D' 也 能 实现 换行 效果 ， 但是， 要 想 上 下 行 对 章 ， 需 要 用 
在 : :before 伪 元 素 上 ， 因 为 CR 是 将 光标 移动 到 当前 行 的 开头 ， 而 LE 是 
将 光标 “垂直 ”移动 到 下 一 行 。 








3. content 图 片 生 成 
content 图 片 生 成 指 的 是 直接 用 ur1 功 能 符 显 示 图 片 ， 例 如 : 


div:before { 
content: url(1.jpg); 
} 





ur1 功 能 符 中 的 图 片 地 址 不 仅 可 以 是 常见 的 png、jpg 格 式 ， 还 可 以 


是 ico 图 片 、svg 文 件 以 及 base64URL 地 址 ， 但 不 支持 CSS3 渐 变 背 景 
图 。 





虽然 文 持 的 图 片 格式 多 种 多 样 ， 但 是 实际 项 目 中 ，content 图 片 生 
成 用 得 并 不 多 ， 主 要 原因 在 于 图 厂 的 尺寸 不 好 控制 ， 我 们 设置 宽 高 无 法 
改变 图 片 的 固有 尺寸 。 所 以 ， 伪 元 又 中 的 图 片 更 多 的 是 使 
用 background-image 模 拟 ， 类 似 这 样 : 








div:before { 
content: "" 


background: url(1.jpg); 
} 





在 我 看 来 content 图 片 生 成 技术 的 实用 性 ， 还 不 如 上 一 节 提 到 的 直 
接 使 用 content 属 性 替换 文字 为 图 片 的 技术 ， 除 非 这 个 生成 的 图 片 是 
base64URL 地 址 。 因 为 content 图 片 和 <img> 图 片 的 加 载 表 现 是 一 样 
的 ， 如 果 没 有 尺寸 限制 ， 都 是 尺寸 为 6，， 然 后 忽然 图 片 尺寸 一 下 子 出 
现 ， 所 导致 的 问题 就 是 页 面 加 载 的 时 候 会 晃动 ， 影 响 体验 。 为 了 避免 这 
个 问题 ， 我 们 只 能 限制 容器 尺寸 ， 那 么 ， 既 然 限制 了 容器 尺寸 ， 为 何不 
使 用 background-image 呢 ?显然 更 好 控制 啊 ? 所 以 ， 只 有 不 需要 控制 
尺寸 的 图 片 才 有 使 用 优势 。 














base64 图 片 由 于 内 联 在 CSS 文 件 中 ， 因 此 直接 出 现 ， 没 有 尺寸 为 的 
状态 ， 同 时 无 须 额外 设置 display 属 性 值 为 块 状 ，CSS 代 码 更 省 。 如 果 
还 没 理解 我 说 的 ， 可 以 看 一 个 对 比例 子 ， 就 明白 什么 意思 了 。 





下 面 两 段 CSS 代 码 分 别 是 content 图 片 生 成 和 content 辅 助 元 素 背 
景 图 : 


a[target=”blank"]:after { 

content: Url(data:image/gifibase64,R91GOD1hBQAFAIABAM6AAAAAACH5BAEAAAE 
ALAAAAAA 
FAAUAAAIHRIB2eKuOCgA7); 


} 

a[ltarget=" blank"]:after { 
content: ''; 
display: inline-block; 
width: 6px; 


height: 6px; 
background: url('blank.gif'); 





可 以 看 到 明显 前 者 使 用 的 CSS 声 明 数 量 少 很 多 。 这 里 有 一 个 实例 ， 
演示 了 如 何 借助 base64 地 址 和 content 图 片 生成 技术 非常 简单 地 实现 新 
标签 页 链接 标示 的 效果 ， 手 动 输入 http://demo.cssworld.cn/4/1-10.php 或 
者 扫 下 面 的 二 维 码 。 结 果 如 图 4-19 所 示 。 








点 击 这 个 链接 当前 页 刷新 ， 看 看 有 没有 标记 ; 点 
击 这 个 链接 。， 新 标签 页 新 打开 一 次 本 页 面 ， 看 
看 有 没有 标记 。 

图 4-19 ”新 标签 页 链接 标示 效果 


4. 了 解 content 开 启 闭 合 符号 生成 





content 文 持 的 属性 值 中 有 一 对 不 常用 的 open-quote 和 close- 
quote 关 键 字 ， 顾 名 思 义 ， 就 是 “开启 的 引号 ”和 “闭合 的 引号 ”， 使 用 纯 
正 的 中 文 解释 就 是 < 上 引号 ”和 “下 引号 ”。 





如 果 单 看 表象 名 称 ， 貌 似 open-quote 和 close-quote 没 什么 特 
别 ， 我 直接 使 用 : 


qd:before { 
content: '“" 


q:after { 
content: 2 ; 


} 





岂 不 更 好 ? 看 ， 更 易 刷 ， 代 码 的 字符 数 还 少 了 好 几 个 。 但 是 ， 实 际 


上 ，open-quote 和 close- guote 不 只 是 引号 这 么 简单 。 


CSS 志 界 中 有 一 个 名 为 quotes 的 属性 ， 可 以 指定 open-quote 和 
close-quote 字 符 具 体 是 人 什么。 例如， 我们 可 以 针对 不 同 语言 指定 不 同 
的 前 后 符号 : 








<p lang="ch"><q> 这 本 书 很 赞 ! </q></p> 

<p lang="en"><q>This book is very good!</q></p> 
<p lang="no"><q>denne bog er fantastisk!</q></p> 
/* 为 不 同 语言 指定 引号 的 表现 */ 

:lang(ch) > q { quotes: '“" 
:lang(en) > q { quotes: '"" '"';) 


:lang(no) > q { quotes: 





/* 在 q 标 签 的 前 后 插入 引号 */ 
qd:before { content: open-quote; } 
qd:after { content: close-quote; } 








具体 表现 如 图 4-20 所 示 。 


这 本 书 很 装 1 
"This book is very good!”" 


«denne bog er fantastiskl> 








图 4-20 不同 语 言 指定 不 同 开 局 闭合 符号 


你 以 为 open-quote 和 close-quote 可 以 使 用 不 同 闭合 符号 就 结 
了 吗 ? 还 没有 结束 ， 虽 然 这 个 quotes 顾 名 思 义 是 “引号 ”， 但 是 其 实际 功 
能 是 : 我 们 可 以 指定 几乎 任意 的 字符 ， 而 且 是 任意 数量 的 字符 。 因 此 ， 
我 们 可 以 玩 得 更 加 灵活 多 变 : 











.ask { 
quotes: ' 提问: “'" '”»'; 


} 
.answer { 
quotes : ' 回 多 





} 
.ask:before, 
.answer:before { 
content: open-quote ; 
} 
.ask:after, 
.answer:after { 
content: close-quote; 
} 
<p class="ask"> 为 什么 open-quote/close-quote 很 少 使 用 ? </p> 
<p class="answer"> 因 为 直接 使 用 字符 更 干脆 ! </p> 











结果 与 如 图 4-21 所 示 类 似 。 


提问 : “为 什么 open-quote/close-quote 很 少 使 用 ?" 


回答 : “因为 直接 使 用 字符 更 干脆 ! 








图 4-21 普通 字符 鸠 占 鹊 巢 效 果 








CSS 这 门 语 言 很 有 意思 ， 我 们 第 用 的 一 些 功 能 往往 并 不 是 这 些 属性 
当初 设计 的 本 意 ， 就 好 比 这 里 的 open-quote 本 意 应 该 显示 引号 ， 这 里 
却 主 要 用 来 显示 标题 。 大 多 数 服 务 型 网 站 都 是 有 帮助 页 面 的 ， 使 用 这 种 
技术 可 以 让 我 们 的 HTML 更 加 干净 简洁 。 


通过 上 面 一 番 简 单 介 绍 ，open-quote 和 close-quote 给 人 感觉 挺 
厉害 的 ， 应 该 被 广泛 使 用 才 对 ， 可 为 何 很 多 人 闻所未闻 、 见 所 未 见 呢 ? 








答案 束 在 于 此 技术 具有 完全 可 将 代 性 ， 且 和 丛 换 实现 的 方法 还 更 容易 
上 手 。 我 们 还 以 上 面 的 “提问 /回答 ”应 用 为 例 ， 如 采 我 们 直接 使 用 字符 生 
成 会 这 样 : 


.ask:before { 
content: ' 提 问 : “' ; 


} 

.answer:before { 
content: "回答 : “'; 

} 

.ask:after, 

.answer:after { 
content: '”'; 


} 








只 出 现 了 一 个 CSS 属 性 ， 学 习 成 本 更 低 ; 直接 使 用 字符 ， 更 容易 理解 ; 
代码 量 似乎 也 少 了 那么 一 点 点 。 由 于 直接 “字符 生成 ?可 以 很 好 地 满足 我 
们 的 开发 需求 ， 因 此 ， 还 需要 额外 学 习 的 open-quote 和 close-quote 
就 鲜 有 人 问津 了 。 





实际 上 ， 我 们 可 以 把 open-quote 和 close-quote 看 成 是 一 种 变 
量 ， 理 论 上 ， 这 种 设计 要 比 直接 字符 输出 更 好 维护 ， 其 原理 等 同 于 
JavaScript 中 的 变量 ， 类 似 这 样 : 


var quotes = ['“', '”']; 


var openQuote = quotes[6]; 
var closeQuote = quotes[1]; 








理论 上 应 该 更 好 维护 ， 但 是 ，CSS 中 的 选择 器 本 身 就 有 变量 的 概 





念 ， 如 .ask 和 .answer， 只 要 改 一 下 ， 所 有 有 相关 类 名 的 元 素 都 会 发 生 
变化 。 于 是 ， 使 用 open-quote 和 close-quote 进 行内 容 生成 的 最 有 具 说 
服 力 的 理由 也 被 扼杀 了 。 





综合 这 些 原因 ， 看 似 强 大 的 open-quote 和 close-quote 关 键 字 最 
后 变 得 很 鸡肋 。 


顺便 提 一 下 ，CSS 中 还 有 no-open-quote 和 no-close-quote 关 键 
字 ， 顾 名 思 义 ， 引 号 不 需要 了 ， 同 样 是 看 上 去 很 酷 实 际 却 很 鸡肋 的 CSS 
关键 字 ， 这 里 我 就 不 展开 了 。 





5. content attr 属 性 值 内 容 生成 


此 功能 比较 常用 ， 我 个 人 用 得 就 比较 多 ， 比 方 说 前 面 一 节 蔡 换 元 素 
那里 利用 alt 属 性 显示 图 片 描述 信息 的 例子 : 


img: :after { 
/* 生成 alt 信 息 */ 


content: attr(alt); 
/* 其 他 CSS 略 */ 
} 























除了 原生 的 HTML 属 性 ， 自 定义 的 HTML 属 性 也 是 可 以 生产 的 ， 例 
如 : 
.Icon:before { 


content: attr(data-title); 
} 


需要 注意 的 是 ，attr 功 能 符 中 的 属性 值 名 称 干 万 不 要 上 自以为是 地 在 
外 面 加 个 引号 。 不 能 有 引号 ， 人 否则 浏览 右 会 认为 是 无 效 的 声明 ， 如 图 4- 


22 上 所 示 。 


Pseudo :before element 


一 一 一 一 一 一 
下 
J 














图 4-22 attr 里 面值 不 能 有 引号 











此 拉 术 虽 实 用 ， 但 并 无 多 少 可 以 展开 的 地 方 ， 因 此 就 说 这 么 多 。 
6. 深入 理解 content 计 数 器 





计数 器 效果 可 以 说 是 content 部 分 的 重 中 之 重 ， 因 为 此 功能 非 营 强 
大 、 实 用 ， 且 不 具有 可 替代 性 ， 甚 至 可 以 实现 连 JavaScript 都 不 好 实现 的 
效果 。 但 同样 ，content 计 数 堪 具有 一 定 的 深度 ， 大 家 可 以 适当 放 慢 节 
奏 。 





所 谓 CSS 计 数 器 效果， 指 的 是 使 用 CSS 代 码 实现 随 着 元 素数 目 增 
多 ， 数 值 也 跟着 变 大 的 效果 。 举 个 例子 ， 我 曾经 在 业余 时 间 给 同事 做 过 
一 个 点 果汁 的 小 系统 ， 由 于 果汁 店 经 常会 有 水 果 因 “果品 ”爆发 被 苑 相 购 
买 而 缺 货 的 情况 ， 因 此 ， 每 人 可 以 选择 3 种 自由 搭配 的 饮品 ， 以 免 无 货 
的 塌 雁 。 于 是 ， 就 有 了 第 1 选择 、 第 2 选择 和 第 3 选择 ， 如 图 4-23 所 示 。 





您 已 选择 : | 黄瓜 汁 了 | 黄瓜 型 汁 了 | 双 瓜 汁 了 
图 4-23 简单 的 计数 器 效果 实现 举例 


图 中 的 灰色 小 字 中 的 1、2、3 就 是 使 用 CSS 计 数 器 生成 的 ， 这 个 可 
以 说 是 最 最 基本 、 最 最 简单 的 计数 器 应 用 了 。 实 际 上 ， 计 数 需 能 够 实现 
的 效果 非常 强大 。 但 是 ， 万 丈 高 楼 平地 起 ， 在 介绍 高 级 应 用 之 前 ， 我 们 

















一 定 要 先 牢 牢 掌 握 与 计数 器 相关 的 基础 知识 。 
CSS 计 数 就 跟 我 们 军训 报 数 一 样 。 其 中 有 这 么 几 个 关键 点 。 
(1) 班级 命名 : 有 个 称呼 ， 如 生 信 4 班 ， 就 知道 谁 是 谁 了 。 
(2) 报 数 规则 : 1、2、3、4 递 增 报 数 ， 还 是 1、2、1、2 报 数 ， 让 
班级 的 人 知道 。 
(3) 开始 报 数 : 不 发 口令 ， 大 了 眼 瞪 小 眼 ， 会 乱 了 秩序 。 
巧 的 是 ， 以 上 3 个 关键 点 正好 对 应 CSS 计 数 器 的 两 个 属性 


(counter-reset 和 counter-increment) 和 一 个 方法 
(counter()/counters()) ， 下 面 依次 讲解 。 

(1) 属性 counter-reset。 顾 名 思 义 ， 束 是 “计数 器 - 重 置 ” 的 意 
思 。 其 实 就 是 “班级 命名 ”， 主 要 作用 就 是 给 计数 器 起 个 名 字 。 如 有 果 可 
能 ， 顺 便 告诉 下 从 哪个 数字 开始 计数 。 默 认 是 8， 注 意 ， 默 认 是 6 而 不 
是 1。 可 能 有 人 会 疑惑 ， 网 上 的 各 种 例子 默认 显示 的 第 1 个 数字 不 都 是 1 
吗 ? 那 是 因为 受 了 counter-increment 普 照 的 影响 ， 后 面 会 详细 讲 
解 。 


好 ， 这 里 我 们 先 看 两 个 简单 的 counter-reset 的 例子 : 





/* 计数 器 名 称 是 "wangxiaoer'， 并 且 默 认 起 始 值 是 2 */ 








.XXX { counter-reset: wangxiaoer 2; } 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/4/1-11.php 或 者 扫 下 面 
的 二 维 码 。 结 果 如 图 4-24 所 示 。 





我 叫 王 小 二 ， 字 如 其 名 ， 下面 要 出 现 的 数字 是 : 


2 


图 4-24 ”counter-reset 为 起 始 值 为 2 





counter-reset 的 计数 重 置 可 以 是 负数 ， 如 -2， 也 可 以 写成 小 
数 ， 如 2.99， 不 过 ，IE 和 Firefox 对 此 都 不 识别 ， 认 为 是 不 合法 数值 ， 直 
接 无 视 ， 当 作 默 认 值 6 来 处 理 ，Chrome 不 嫌 贫 嫉 富 ， 任 何 小 数 都 是 向 下 
取 整 ， 如 2.99 当 成 2 处 理 ， 于 是 王 小 二 还 是 那个 王 小 二 。 

到 此 为 止 ? 当然 不 是 ! counter-reset 还 有 一 手 ， 就 是 多 个 计数 器 
同时 命名 。 例 如 ， 王 小 二 和 王 小 三 同时 登台 : 


.XXX { counter-reset: wangxiaoer 2 wangxiaosan 3; } 


直接 空格 分 隅 ， 而 不 是 使 用 去 号 分 隔 。 


的 二 维 码 。 结 果 如 图 4-25 所 示 。 





图 4-25 counter-reset 多 值 并 存 


另外 ，counter-reset 还 可 以 设置 为 none 和 inherit。 取 消 重 置 以 
及 继承 重 置 。 这 里 就 不 展开 了 。 


(2) 属性 counter-increment。 顾 名 思 义 ， 就 是 “计数 器 递增 ”的 
意思 。 值 为 counter-reset 的 1 个 或 多 个 关键 字 ， 后 面 可 以 跟随 数字 ， 
表示 每 次 计数 的 变化 值 。 如 果 省 略 ， 则 使 用 默认 变化 值 1 (方便 起 见 ， 
下 面 都 使 用 默认 值 做 说 明 〉。 





CSS 的 计数 器 的 计数 是 有 一 套 规则 的 ， 我 将 之 形象 地 称 为 “普照 规 
则 ”。 具 体 来 讲 就 是 ， 普照 源 (counter-reset) 唯一 ， 每 普照 





(counter-increment) 一 次 ， 普 照 源 增 加 一 次 计数 值 。 


于 是 ， 我 们 就 可 以 解释 上 面 提 到 的 


默认 值 是 0” 的 问题 了 。 通 常 CSS 


计数 器 应 用 的 时 候 ， 我 们 都 会 使 用 counter-increment， 肯 定 要 用 这 
个 ， 否 则 怎么 递增 呢 ! 而 且 一 般 都 是 一 次 普照 ， 正 好 加 1， 于 是 ， 第 一 


个 计数 的 值 就 是 1 (0+1=1) ! 


下 面 通过 几 个 例子 给 大 家 形象 地 展示 一 下 “普照 规则 ”。 


手动 输入 http://demo.cssworld.cn/4/1- 


13.php 或 者 扫 下 面 的 二 维 码 。 


本 示例 中 ， 王 小 二 的 counter-reset 值 是 wangxiaoer 2， 但 是 ， 显 示 
的 计数 不 是 小 2 而 是 小 3， 王 小 二 变 成 了 王 小 三 ! 如 图 4-26 所 示 。 











我 叫 王 小 二 ， 万 万 没 想到 ， 会 出 
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er ert: 


加 

















图 4-26 counter-increment 递 雪 


曾 与 counter-reset 值 


示例 效果 的 核心 代码 如 下 : 


.Counter { 
counter-reset: wangxiaoer 2; 
counter-increment: wangxiaoer; 


} 
.Counter:before { 

content: counter(wangxiaoer); 
} 


<p class="counter"></p> 





这 里 counter-increment 普 照 了 <p> 标 签 ，counter-reset 值 增 
加 ， 默 认 递 增 1， 于 是 计数 从 设置 的 初始 值 2 变 成 了 3，wangxiaoer 就 是 
这 里 的 计数 器 ， 自 然 伪 元 素 content 值 counter(wangxiaoer) 就 是 3。 


当然 ， 它 也 可 以 普照 自身 ， 也 就 是 counter-increment 直 接 设 置 
在 伪 元 素 上 : 
.Ccounter { 


counter-reset: wangxiaoer 2; 


} 


.Counter:before { 
content: counter(wangxiaoer); 
counter-increment: wangxiaoer; 





依然 是 1 次 普照 ， 依 旧 全 局 的 计数 喜 加 1， 所 以 显示 的 数值 还 是 3， 
和 上 面 的 例子 一 样 。 








趁 热 打铁 ， 如 果 父 元 素 和 子 元 了 素 都 被 counter-increment 普 照 1 
次 ， 结 果 会 如 何 呢 ? 


很 简单 ， 父 元 素 1 次 普照 ， 子 元 素 1 次 普照 ， 共 2 次 普照 ，counter- 
reset 设 置 的 计数 器 值 增加 2 次 ， 计 数 起 始 值 是 2， 于 是 现实 的 数字 就 


是 4 啦 ! 


眼见 为 实 ， 手 动 输入 http:/demo.cssworld.cn/4/1-14.php 或 者 扫 下 面 
的 二 维 码 。 结 果 4 如 “图 4-27 所 示 。 





我 叫 王 小 二 ， 万 万 没 想到 ， 我 现在 户 然 成 了 王 小 … 
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图 4-27 counter-increment 父 子 连续 普照 递增 











核心 CSS 代 码 如 下 : 


.Counter { 
counter-reset: wangxiaoer 2; 
counter-increment: wangxiaoer; 


} 


.Counter:before { 
content: counter(wangxiaoer); 
counter-increment: wangxiaoer; 





总 而 言 之 ， 无 论 位 置 在 何 处 ， 只 要 有 counter-increment， 对 应 
的 计数 器 的 值 就 会 变化 ，counter() 只 是 输出 而 已 ! 


理解 了 “普照 规则 ”， 通 常 的 计数 器 递增 效果 也 惑 可 以 理解 了 。 





考虑 下 和 面 这 两 个 问题 : 


(1) 和 爸 多 受到 普照 ， 且 重 置 默认 值 0， 和 苞 和 爸 有 两 个 孩子 。 孩 子 自 号 
都 没有 普照 。 两 个 孩子 的 计数 值 是 多 少 ? 





(2) 多 和 爸 没 有 普照 ， 重 置 默 认 值 96， 和 多 将 有 两 个 孩子 。 孩 子 目 身 都 
接受 普照 。 两 个 孩子 的 计数 值 是 多 少 ? 


答案 是 : 1,1 和 1,2! 
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答案 拓 然 不 一 样 ， 有 什么 差别 呢 ? 


很 简单 。 什 么 爸爸 、 孩 子 ， 你 都 不 要 关心 ， 只 需要 看 被 普照 了 几 
次 。 情 况 1 只 有 和 爸爸 被 普照 ， 因 此 ， 计 数 器 增加 1 次 ， 此 时 两 个 孩子 的 
counter 自 然 都 是 1。 情 况 2， 两 个 孩子 被 普照 ， 普 照 2 次 ， 第 一 个 孩子 
普照 之 时 ， 计 数 器 加 1， 也 就 是 1; 第 二 个 孩子 普照 之 时 再 加 1， 于 是 就 
是 2。 于 是 ， 两 个 孩子 的 counter 输 出 就 是 1, 2。 








眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/4/1-15.php 或 者 扫 下 面 
的 二 维 码 。 结 果 如 图 4-28 所 示 。 
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图 4-28 兄弟 情 深 ,计数 递增 





核心 CSS 代 码 如 下 : 


.Counter { 
counter-reset: wangxiaoer 2; 


} 


.Counter :before, 


.Counter:after { 
content: counter(wangxiaoer); 
counter-increment: wangxiaoer; 





计数 器 的 数值 变化 遵循 HTML 泻 染 顺 序 ， 过 到 一 个 jncrement 计 数 
器 就 变化 ， 什 么 时 候 counter 输 出 就 输出 此 时 的 计数 值 。 


除了 以 上 基本 特性 外 ，counter-increment 还 有 其 他 一 些 设 定 。 


。 counter-reset 可 以 一 次 命名 两 个 计数 器 名 称 ，counter- 
increment 自 然 有 与 之 呼应 的 设 定 ， 在 写法 上 也 是 空格 区 分 就 可 以 
了 了 。 例如 : 


.Counter { 
counter-reset: wangxiaoer 2 wangxiaosan 3; 
counter-increment: wangxiaoer wangxiaosan; 


} 


.Counter:before { 
content: counter(wangxiaoer); 


} 


.Counter:after { 
content: counter(wangxiaosan); 


} 





结果 如 图 4-29 所 示 。 








。 正如 本 节 开 始 时 提 到 的 ， 这 变化 的 值 不 一 定 是 1， 可 以 灵活 设置 。 
例如 : 


counter-increment: counter 2 


那 就 是 两 个 两 个 地 增加 ， 对 比 看 更 棒 ! 图 4-30 左 半 是 默认 的 加 1， 
右 半 是 加 2。 
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图 4-29 ”多 个 计数 器 同时 递增 





1. increment + 显示 2. increment + 显示 


2，increment + 显示 4，increment + 显示 

3. increment + 显示 6. jincrement + 显示 
4，increment + 显示 8.， increment + 显示 

4， 显 示 8. 显示 

4， 显示 8. 显示 





图 4-30 ”不同 递增 值 的 计数 对 比 
变化 的 值 还 可 以 是 负数 ， 例 如 : 
counter-increment: counter -1 
这 样 就 有 了 递减 排序 效果 啦 ! 

。 值 还 可 以 是 none 或 者 ijnherit。 


(3) 方法 counter()/counters()。 这 是 方法 ， 不 是 属性 。 类 似 
CSS3 中 的 calc() 计 算 。 这 里 的 作用 很 单纯 ， 即 显示 计数 ， 不 过 名 称 、 
用 法 有 多 个 ， 如 图 4-31 所 示 。 


content:cou } 


人 counter (name, style) 

急 counters (name, string) 
counters (name, string, style) 
sa IFL... 


去 


一 < 


图 4-31 counter/counters 的 一 些 名 称 和 用 } 





到 目前 为 止 的 所 有 示例 使 用 的 都 是 最 简单 的 用 法 : 





/* name 就 是 counter-reset 的 名 称 */ 
counter(name) 


那 下 面 这 个 语法 是 什么 意思 呢 ? 


这 里 的 style 参 数 还 是 有 些 名 笃 的 。 它 文 持 的 关键 字 值 束 是 1ist- 
style-type 文 持 的 那些 值 。 它 的 作用 是 : 我 们 递增 递减 可 以 不 一 定 是 
数字 ， 还 可 以 是 英文 字母 或 者 罗马 文 等 。 








list-style-type: disc | circle | square | decimal | lower-roman | upper-ro 
man | 


lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | 


lower-greek 


| hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-1 
atin | upper-latin 





眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/4/1-16.php 或 者 扫 下 面 
的 二 维 码 。 结 果 如 图 4-32 所 示 。 





我 明王 小 二 ， 万 万 没 想 到 ， 我 变 成 了 罗马 人 ! 








图 4-32 “小 写 罗 马 数字 格式 表示 当前 计数 器 的 值 
核心 CSS 代 码 如 下 : 


counter 还 支持 级 联 。 也 就 是 说 ， 一 个 content 属 性 值 可 以 有 多 
个 counter() 方 法 。 


眼见 为 实 ， 手 动 输入 http:/demo.cssworld.cn/4/1-17.php 或 者 扫 下 面 
的 二 维 码 。 结 果 如 图 4-33 所 示 。 





我 电 王 小 二 ， 万 万 没 想 到 ， 我 还 有 一 个 兄 苇 ! 
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图 4-33 ”多 个 counter 并 存 








核心 CSS 代 码 如 下 : 


.Counter { counter-reset: wangxiaoer 2 wangxiaosan 3; } 
.Counter:before { 


content: counter(wangxiaoer) '\A' counter(wangxiaosan); 
white-space: pre; 





} 


下 面 介 绍 一 下 counters() 方 法 。 看 似 只 比 counter 多 了 个 字母 s， 
但 却 有 着 至 尊 宝 变 成 孙悟空 的 意味 在 里 面 。counters 几 乎 可 以 说 是 蔡 
套 计 数 的 代名词 。 





我 们 平时 的 序号 不 可 能 就 只 是 1、2、3、4...... 还 会 有 诸如 1.1、 
1.2、1.3 等 的 子 序号 。 前 者 就 是 counter() 干 的 事情 ， 后 者 就 
是 counters() 干 的 事情 。 





counters() 的 基本 用 法 为 中; 


其 中 ，string 参 数 为 字符 串 (需要 引号 包围 的 ， 是 必需 参数 ) ， 表 示 
子 序 号 的 连接 字符 串 。 例 如 ，1.1 的 string 就 是 '.'，1-1 就 是 '-'。 





看 上 去 很 简单 。 但 是 ， 如 果 理 解 不 是 很 深刻 ， 日 后 再 使 用 肯定 会 过 


到 厅 烦 一 一 “ 喷 ? 怎么 没有 子 序列 ， 明 明 语 法 正确 啊 ? ”首先 ， 记 住 这 一 
句 话 :“ 普 照 源 是 唯一 的 。” 所 以 ， 如 果 只 在 <body> 标 签 上 设 

置 counter-reset， 就 算 子 元 素 欣 人 套 了 里 外 十 八 屋 ， 还 是 不 会 有 任何 馈 
套 序号 出 现 ! 所 以 ， 要 想 实 现 散 套 ， 必 须 让 每 一 个 列表 容器 拥有 一 

个 “普照 源 ”， 通 过 子 夫 对 父辈 的 counter-reset 重 置 、 配 

合 counters() 方 法 才能 实现 计数 舱 套 效果 。 








眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/4/1-18.php 或 者 扫 下 面 
的 二 维 码 。 结 果 如 图 4-34 所 示 。 





我 叫 王 小 二 ， 万 万 没 想 到 ,一 着 不 愤 ， 娃娃 连 营 满 地 滚 : 


1. 我 是 王 小 一 
1-1. 我 是 王 小 二 的 大 儿子 
1-2. 我 是 于 小 二 的 二 儿子 
1-2-1. 我 是 王 小 二 的 二 儿子 的 大 孙子 
1-2-2. 我 是 王 小 二 的 二 儿子 的 二 孙子 
1-2-3. 我 是 王 小 二 的 二 儿子 的 小 孙子 
1-3. 我 是 王 小 二 的 三 儿子 
2. 我 是 王 小 二 
3. 我 是 王 小 四 
3-1. 我 是 王 小 四 的 大 儿子 


内 





图 4-34 counters 的 string 参 数 与 敬 3 


n 


使 用 counters() 实 现 计数 般 套 效果 的 时 候 很 容易 遇 到 类 似 这 样 的 
麻烦 一 一 “ 呈 ， 怎 么 子 序列 不 按 层级 顺序 来 呀 ?命名 语法 明明 完全 正确 
啊 ! ”还 是 要 记 住 这 一 句 话 :“ 一 个 容器 里 的 普照 源 (counter-reset) 
是 唯一 的 。” 所 以 ， 如 果 你 不 小 心 把 计数 显示 和 计数 重 置 元 素 以 兄弟 元 
素 形 式 放 在 一 起 (虽然 HTML 内 容 布 局 呈现 是 没有 异常 的 ) ， 就 很 可 能 
会 出 现 计数 序号 乱入 的 情况 。 








还 是 举 个 例子 说 明 一 下 吧 ， 手 动 输入 http://demo.cssworld.cn/4/1- 
19.php 或 者 扫 下 面 的 二 维 码 。 结 果 如 图 4-35 所 示 。 这 时 就 会 看 到 标 红 部 
分 的 序号 显示 异常 了 ! 








为 何 会 出 现 这 个 问题 ? 我 们 看 一 THTML (主要 是 注释 ) : 





<div class="reset"> 
<div class="counter"> 我 是 王 小 二 </div> 
<div class="reset"><-- 先 下 面 文字 说 明 --> 


</div> 
<div class="counter"> 我 是 王 小 三 </div> 
<div class="counter"> 我 是 王 小 四 </div> 





<div class="reset"> 
<div class="counter"> 我 是 王 小 四 的 大 儿子 </div> 
</div> 
</div> 








这 里 的 .reset 与 上 面 的 .counter 是 兄弟 关系 ， 而 不 是 父子 关系 。 虽 然 
布局 泻 染 上 没有 差异 ， 但 是 一 个 容器 的 counter-reset 是 唯一 的 ， 一 旦 
子 元 素 出 现 counter-reset， 就 会 改变 整个 容器 的 垦 套 关系 ， 于 是 ， 后 
面 的 “ 王 小 三 “ 王 小 四 ”其 实 已 经 进入 了 二 级 艇 僚 ， 因 此 显示 的 是 1-3 和 
1-4， 相 信 读 者 稍稍 体会 一 下 就 能 明白 了 。 











我 明王 小 一 


可 
| 
| 
[ 滋 
出 
| 
订 
"| 
下 
出 


孙 成 群 ( 反例 ) : 


我 星 于 小 二 
1-1. 我 是 王 小 二 的 大 儿子 
1-2. 我 是 王 小 二 的 二 儿子 
1-2-1. 我 旺 王 小 二 的 二 儿子 的 大 孙子 
1-2-2. 我 是 于 小 二 的 二 儿子 的 二 孙子 
1-2-3. 我 是 王 小 二 的 二 儿子 的 小 孙子 
1-2-4. 我 是 于 小 二 的 三 儿子 
1-3. .我 是 于 小 二 
1-4. 我 是 王 小 四 
1-1. 我 是 王 小 四 的 大 儿子 


图 4-35 counters 列 表 被 重 置 乱入 


这 种 计数 效果 在 模拟 书籍 的 目录 效果 时 非常 实用 ， 大 家 可 以 参照 上 
面 正确 的 杉 套 例子 修 修改 改 就 可 以 了 。 





counters() 也 是 支持 style 自 定义 递增 形式 的 : 


counters(name, string, style) 


它 与 counter() 的 style 参 数 使 用 一 臻 ， 这 里 不 资 述 。 


最 后 ， 还 有 一 个 比较 重要 的 点 需要 说 明 一 下 ， 就 是 显示 content 计 
数值 的 那个 DOM 元 素 在 文档 流 中 的 位 置 一 定 要 在 counter-increment 
元 素 的 后 面 ， 否 则 是 没有 计数 效果 的 。 


举 个 例子 ， 我 们 可 以 使 用 纯 CSS 实 现 自动 统计 选中 元 素 个 数 的 效 
果 ， 但 是 很 可 能 显示 数值 的 视觉 位 置 是 在 操作 区 域 的 左 侧 或 者 上 方 ， 类 
似 图 4-36 所 示 。 








列表 选项 1 


列表 选项 2 名 


列表 选项 3 


列表 选项 4 


256X192 








图 4-36 ”counters 数 值 显 示 在 操作 区 域 左 侧 








如 采 我 们 是 传统 的 布局 ， 左 侧 的 圆圈 中 的 数值 必然 是 无 法 显现 的 ， 
我 们 需要 把 左 侧 的 列表 选项 元 素 放 在 操作 元 素 的 后 面 才 可 以 ， 类 似 下 面 
这 样 : 
<nav></nav> 


7. content 内 容 生 成 的 混合 特性 





所 谓 “content 内 容 生 成 的 混合 特性 ” 指 的 是 各 种 content 内 容 生 成 
语法 是 可 以 混合 在 一 起 使 用 的 ， 举 下 面 几 个 简单 的 例子 : 


a:after { 
content: "(" attr(href) ")"; 


q:before { 
content: open-quote url(1.jpg); 
} 
.Counter:before { 
content: counters(wangxiaoer, '-') ' 

















4.2 温和 的 padding 属 性 


盒 尺 寸 四 大 家 族 元 素 中 ，padding 的 性 格 是 最 温和 的 。 所 谓 “ 温 
和 ” 指 的 是 我 们 在 使 用 padding 进 行 页 面 开 发 的 时 候 很 少 会 出 现 意 想 不 
到 的 情况 ， 这 种 感觉 就 好 比 和 一 个 几乎 不 会 发 脾气 的 人 相处 。 


padding 指 盒子 的 内 补 间 。“ 补 间 ” 这 个 词 比较 术语 化 ， 我 们 不 妨 将 
其 理解 为 快递 盒子 内 快递 商品 外 包 囊 的 那 层 起 保护 作用 的 海 绢 。 只 是 在 
CSS 中 ， 这 个 “海绵 ”默认 是 透明 的 。 在 现实 世界 中 ， 海 绵 不 会 影响 盒子 
的 尺寸 ， 但 在 CSS 世 界 中 ， 尺 寸 规 则 束 有 所 不 同 了 。 





4.2.1 padding 与 元 素 的 尺寸 


因为 CSS 中 默认 的 box-sizing 是 content-box， 所 以 使 用 padding 
会 增加 元 素 的 尺寸 。 例 如 : 


.box { 
width: 86px; 
padding: 28px; 
} 





如 果 不 考虑 其 他 CSS 干 扰 ， 此 时 .box 元 素 所 占据 的 宽度 就 应 该 是 120 像 
素 〈86px +28pxx2) ， 这 其 实 是 不 符合 现实 世界 的 认 知 的 ， 人 们 总 是 
习惯 把 代码 世界 和 现实 世界 做 映射 ， 因 此 ， 新 人 难免 会 在 padding 的 尺 
寸 问 题 上 躁 到 点 坑 。 这 也 导致 很 多 人 乐此不疲 地 设置 box-sizing 

为 border-box， 甚 至 直接 全 局 重 置 : 


* { box-sizing: border-box; } 








我 个 人 是 不 推荐 这 种 做 法 的 ， 原 因 见 3.2.4 节 。 局 部 使 用 ， 尽 量 采 用 
无 宽度 以 及 宽度 分 离 准 则 实现 才 是 好 的 解决 之 道 。 











很 多 人 可 能 有 这 样 的 误区 ， 认 为 设置 了 box-sizing:border- 
box， 元 素 尺 寸 就 不 会 变化 。 大 多 数 情 况 下 是 这 样 的 ， 但 是 ， 如 果 
padding 值 足够 大 ， 那 么 width 也 无 能 为 力 了 。 例 如 : 


.box { 
width: 86px; 


padding: 26px 66pX 
box-sizing: border-box; 


} 





则 此 时 的 width 会 无 效 ， 最 终 客 度 为 120 像 系 “68pxx2) ， 而 里 面 的 内 
容 则 表现 为 "首选 最 小 宽度 ”。 











上 述 斥 十 表现 是 对 具有 块 状 特性 的 元 素 而 言 的 ， 对 于 内 联 元 素 〈 不 
包括 图 片 等 蔡 换 元 素 ) 表现 则 有 些许 不 同 。 这 种 不 同 的 表现 让 很 多 很 多 
的 前 问 同 事 有 这 么 一 个 错误 的 认识 : 内 联 元 素 的 padding 只 会 影响 水 平 
方向 ， 不 会 影响 垂直 方 同 。 














这 种 认 知 是 不 准确 的 ， 内 联 元 素 的 padding 在 垂直 方向 同样 会 影响 
布局 ， 影 响 视觉 表现 。 只 是 因为 内 联 元 了 素 没 有 可 视 宽度 和 可 视 高 度 的 说 
法 (clientHeight 和 clientWidth 永 远 是 9) ， 垂 直方 向 的 行为 表现 完 
全 受 line-height 和 vertical-align 的 有 影响， 视觉 上 并 没有 改变 和 上 
一 行 下 一 行内 容 的 间距 ， 因 此 ， 给 我 们 的 感觉 束 会 是 慌 直 padding 没 有 
起 作用 。 














如 果 我 们 给 内 联 元 素 加 个 背景 色 或 者 边框 ， 自 然 就 可 以 看 到 其 尺寸 


空间 确实 受 padding 影 响 了 。 例 如 : 


alt 
padding: 58px; 


background-color: #cd66080; 
} 





然后 表现 就 会 如 图 4-37 所 示 这 般 。 眼 见 为 实 ， 手 动 输入 
http:/demo.cssworld.cn/4/2-1.php 或 者 扫 下 面 的 二 维 码 。 














图 4-37 ”内 联 元 素 padding 垂 直方 向 也 是 有 效 的 











可 以 明显 看 到 ， 尺 寸 昌 有 效 ， 但 是 对 上 下 元 系 的 原本 布局 却 没有 任 
何 影响 ， 仪 仅 是 垂直 方向 发 生 了 层 合 ， 如 图 4-38 所 示 。 








CSS 中 还 有 很 多 其 他 场景 或 属性 会 出 现 这 种 不 影响 其 他 元 素 布局 而 
是 出 现 层 琶 效 果 的 现象 。 比 如 ，relative 元 素 的 定位 、 盒 阴影 box- 





shadow 以 及 outline 等 。 这 些 层 闭 现象 虽然 看 似 类 似 ， 但 实际 上 是 有 区 
别 的 。 其 分 为 两 类 : 一 类 是 纯 视 觉 层 登 ， 不 影响 外 部 尺寸 ， 另 一 类 则 会 
影响 外 部 尺寸 。box-shadow 以 及 outline 属 于 前 者 ， 而 这 里 的 ijnline 
元 素 的 padding 层 闭 属 于 后 者 。 区 分 的 方式 很 简单 ， 如 果 父 容 

器 overflow:auto， 层 车 区 域 超出 父 容器 的 时 候 ， 没 有 深 动 条 出 现 ， 则 
是 纯 视 觉 的 ， 如 有 果 出 现 滚动 条 ， 则 会 影响 尺寸 、 影 啊 布局 。 











如 果 上 面 的 示例 父 元 素 设 置 overflow:auto， 则 会 有 类 似 图 4-39 所 
示 的 表现 。 


内 联 元 素 垂 直 padding 也 有 作用 实例 页 面 








图 4-38 ”内 联 元 素 padding 重 直方 向 层 车 表现 


内 联 元 素 牌 直 padding 也 有 作用 实例 页 面 





图 4-39 ”内 联 元 素 垂 直 padding 影 响 父 级 出 现 滚动 条 








由 此 可 见 ， 内 联 元 素 padding 对 视觉 层 和 布局 层 具 有 双重 影响 ， 所 


有 类 似 “ 垂 直方 同 padding 对 内 联 元 素 没 有 作用 ”的 说 法 显然 是 不 正确 
的 。 


好 了 ， 现 在 知道 了 内 联 元 素 padding 有 用 ， 这 对 我 们 做 实际 CSS 开 
发 有 什么 帮助 呢 ? 





首先 ， 我 们 可 以 在 不 影响 当前 布局 的 情况 下 ， 优 雅 地 增加 链接 或 按 
钮 的 点 击 区 域 大 小 。 比 方 说 ， 文 章 中 会 有 一 些 文字 链接 ， 默 认 情 况 下 ， 
这 些 链 接 的 点 击 区 域 的 高 度 是 受 font-size 字 体 大 小 控制 的 ， 和 行 高 没 
有 关系 。 尤 其 在 Chrome 等 浏览 器 下 ， 高 度 仅 1em， 这 么 小 的 高 度 ， 要 是 
在 移动 端 ， 我 们 的 手指 不 一 定 能 够 一 次 点 中 ， 可 能 要 惟 好 多 下 ， 此 时 惑 
有 必要 增加 链接 的 点 击 区 域 大 小 ， 但 是 前 提 是 不 影响 当前 的 内 容 布局 。 
此 时 ， 我 们 就 可 以 使 用 padding 天 然 实现 我 们 想 要 的 效果 ， 例 如 : 




















article a { 
padding: .25em 6; 
} 





前 文 多 次 提 到 ，CSS2.1 的 属性 就 是 为 了 图 文 显示 而 设计 的 ， 从 这 一 
点 出 有 发， 我们 吏 不 难 理解 为 何 内 联 元 素 的 垂直 padding 会 是 这 样 的 样式 
表现 了 ， 目 的 就 是 如 上 面 说 的 例子 这 样 ， 增 加 点 击 区 域 同时 对 现 有 布局 
无 任何 有 影响， 如 果 我 们 设置 成 ijnline-block， 则 行 间 距 等 很 多 麻烦 事 
就 会 出 来 。 








当然 ，CSS 的 有 趣 之 处 在 于 我 们 可 以 利用 其 特性 表现 实现 其 设计 初 
训 以 外 的 一 些 效果 。 例 如 ， 这 里 有 个 简单 的 例子 ， 利 用 内 联 元 素 的 
padding 实 现 高 度 可 控 的 分 隔 线 。 传 统 偷懒 的 实现 方式 可 能 是 直接 使 
用 “管道 符 "”， 如 : 














但 是 使 用 “管道 符 ” 的 话 ， 因 为 是 字符 ， 所 以 高 度 不 可 控 。 如 果 对 视觉 呈 
现 要 求 比较 高 ， 就 需要 进行 CSS 图 形 模 拟 ， 其 中 方法 之 一 就 是 可 以 借助 
内 联 元 素 和 padding 属 性 来 实现 ，CSS 和 HTML 代 码 如 下 : 


a + a:before { 
content: ""; 
font-size: 90; 
padding: 16px 3px 1px; 
margin-left: 6px; 
border-left: 1px solid gray; 
} 


<a href=""> 登 录 </a><a href=""> 注 册 </a> 








一 个 高 度 不 那么 高 的 垂直 分 隔 符 就 出 来 了 ， 如 图 4-40 所 示 。 有 兴趣 
可 以 自己 感受 一 下 ， 手 动 输入 http://demo.cssworld.cn/4/2-2.php 或 者 扫 下 
面 的 二 维 码 。 





图 4-40 ”内 联 元 素 padding 实 现 的 垂直 分 隔 符 





最 后 ， 再 简单 说 一 个 内 联 元 素 垂直 padding 的 妙用 吧 ! 大 家 应 该 都 


知道 网 页 可 以 通过 地 址 栏 的 hash 值 和 页 面 HIML 中 id 值 一 样 的 元 素 发 生 
锚 点 定位 吧 ? 有 时 候 ， 我 们 希望 定位 的 元 素 ， 如 标题 距离 页 面 的 顶部 有 
一 段 距离 ， 比 方 说 页 面 正 好 有 一 个 50 像 素 高 的 position:fixed 的 导航 
栏 。 如 果 按 照 浏 览 器 目 己 的 特性 ， 标 题 就 会 定位 在 这 个 固定 导航 的 下 
面 ， 这 显然 不 是 我 们 想 看 到 的 ， 那 怎么 办 呢 ? 








很 多 人 会 想到 让 标题 栏 设 置 一 个 padding-top:58px， 但 是 ， 这 种 
影响 布局 的 事情 大 多 数 时 候 只 是 理论 上 可 行 ， 难 道 没有 什么 简单 实用 的 
办 法 吗 ? 这 时 候 ， 我 们 不 妨 试 试 使 用 内 联 元 素 ， 块 级 元 素 设 
置 padding-top:56px 会 影响 布局 ， 但 是 内 联 元 素 不 会 ， 于 是 ， 事 情 就 
简单 了 。 假 设 下 面 是 原来 的 实现 : 








<h3 id="hash"> 标 题 </h3> 
h3 { 


line-height: 36px; 
font-size: 14px; 


} 





则 我 们 可 以 将 其 改 成 : 


<h3><span id="hash"> 标 题 </span></h3> 
h3 { 
line-height: 36px; 
font-size: 14px; 
} 
h3 > span { 
padding-top: 58px; 





} 








这 样 既 不 影响 原来 的 布局 和 定位 ， 同 时 又 把 
http://www.cssword.cn/xxxx/#hash 定 位 位 置 往 下 移动 了 50 像 素 ， 
岂 不 美 哉 ! 


虽然 这 不 是 十 全 十 美的 方法 ， 但 是 总 体 性 价 比 还 是 很 不 错 的 。 然 
后 ， 如 果 我 们 的 <h3> 标 签 设置 overflow:hidden， 则 Chrome 和 Firefox 
浏览 器 定位 不 受 有 影响 ， 但 是 下 浏览 器 会 定位 在 <h3> 标 签 位置 ， 这 个 需要 
注意 。 

实际 上 ， 对 于 非 蔡 换 元 素 的 内 联 元 素 ， 不 仅 padding 个 会 加 入 行 盒 


高 度 的 计算 ，margin 和 border 也 都 是 如 此 ， 都 是 不 计算 高 度 ， 但 实际 
上 在 内 联合 周围 发 生 了 演 染 。 





4.2.2 ” padding 的 百分比 值 


关于 padding 的 属性 值 ， 其 实 没 多 少 好 说 的 。 其 一 ， 和 margin 属 性 
不 同 ，padding 属 性 是 不 文 持 负 值 的 ， 其 二 ，padding 文 持 百 分 比值 ， 
但 是 ， 和 height 等 属性 的 百分比 计算 规则 有 些 差异 ， 差 异 在 
于 : padding 百 分 比值 无 论 是 水 平方 同 还 是 垂直 方 同 均 是 相对 于 宽度 计 
算 的 ! 











为 何 这 么 设计 呢 ?” 首 先 绝对 和 “ 死 循环 ”无 关 ， 相 对 高 度 计算 其 实 也 
没什么 问题 。 我 个 人 猜想 ， 如 果 垂 直 padding 相 对 于 height 计 算 ， 大 多 
数 情况 下 计算 值 都 是 9， 跟 摆设 没什么 区 别 ， 还 不 如 相对 宽度 计算 ， 
为 CSS 默 认 的 是 水 平流 ， 计 算 值 一 直 会 有 效 ， 而 且 我 们 还 可 以 利用 这 一 
特性 实现 一 些 有 意思 的 布局 效果 。 也 就 是 面向 场景 和 需求 设计 ， 这 种 设 
计 可 以 让 我 们 轻松 实现 自 适 应 的 等 比例 矩形 效果 。 例 如 ， 使 用 


div { padding: 56%; } 


就 可 以 实现 一 个 正方 形 ， 如 果 这 样 : 














div { padding: 25% 56%; } 


就 得 到 了 一 个 宽 高 比 为 2:1 的 矩形 效果 。 





页 开发 的 时 候 经 常会 有 横贯 整个 屏幕 的 头 图 效果 ， ee 
有 如 200 像 双 高， 屏幕 小 的 时 候 图 片 两 侧 内 容 隐 叱 。 然 而 ， 
种 实现 有 一 个 问题 ， 就 是 类 似 笔记 本 这 样 的 小 屏幕 ， ee 
致 下 面 主 体内 容 可 能 一 屏 都 实现 不 了 ， 但 是 ， 如 果 我 们 使 用 padding 进 
行 等 比例 控制 ， 则 小 屏 磊 下 头 图 高 度 天 然 等 比例 顷 小 ， 没 有 任何 
JavaScript， 却 依然 适 配 良 好 ! 例如 : 





.box { 
padding: 16% 56%; 
position: relative; 


.box > img { 
position: absolute; 
width: 166%; height: 166%; 
left: 6; top: 60; 


} 





就 实现 了 一 个 宽 高 比 为 5:1 的 比例 固定 的 头 图 效果 ， 上 述 方法 包括 IE6 在 
内 的 浏览 器 都 兼容 。 


有 兴趣 可 以 自己 感受 一 下 ， 手 动 输入 http:/demo.cssworld.cn/4/2- 
3.php 。 改 变 浏 览 器 宽度 即 可 感受 到 等 比例 的 变化 。 





上 面 百 分 比值 是 应 用 在 具有 块 状 特性 的 元 素 上 的 ， 如 末 是 内 联 元 
素 ， 会 有 怎样 的 表现 呢 ? 


同样 相对 于 宽度 计算 ; 
默认 的 高 度 和 宽度 细节 有 差异 


。 padding 会 断 行 。 
我 们 先 来 看 一 下 内 联 元 素 的 padding 断 行 ， 代 码 如 下 : 


.box { 
border: 2px dashed #cd6666 ; 


Span { 


padding: 56%; 
background-color: gray; 








} 
<span> 内 有 文字 若干 </spany> 


效果 如 图 4-41 所 示 〈( 截 自 Chrome 浏 览 器 ) 。 表 现 诡 异 之 处 有 : “内 
有 ”两 字 不 见 了 , “文字 ”两 字 居 右 显示 了 ， ee 背景 色 宽 
度 和 外 部 容器 宽度 不 一 致 等 。 














图 4-41 ”内 联 元 素 padding 百 分 比值 的 诡异 表现 








CSS 的 很 多 现象 很 难 解释 ， 原 因 在 于 其 表现 往往 是 多 个 属性 多 个 规 
则 一 起 生效 的 结果 ， 并 非 单一 属性 作用 的 结果 。 例 如 这 里 的 例子 ， 虽然 
几乎 没有 什么 实用 价值 ， 但 是 对 于 我 们 深入 理解 内 联 元 素 的 世界 很 有 和 儿 
助 。 





对 于 内 联 元 素 ， 其 padding 是 会 断 行 的 ， 也 就 是 padding 区 域 是 跟 





着 内 联 盒 模型 中 的 行 框 盒子 走 的 ， 上 面 的 例子 由 于 文字 比较 多 ， 一 行星 
示人 不 了， 于 是 “有 干 ” 两 字 换 到 了 下 一 行 ， 于是， 原本 的 padding 区 域 也 
跟着 一 起 掉 下 来 了 ， 根 据 后 来 居 上 的 层 受 规则 ,“ 内 有 ”两 字 上 自然 就 正好 
被 履 兰 ， 于 是 看 不 见 了 ;， 同 时， 规则 的 矩形 区 域 因 为 换行 ， 也 变 成 了 五 
条 边 ; 至 于 宽度 和 外 部 容 圳 盒子 不 一 样 宽 ， 那 是 自然 的 ， 如 果 没 有 任何 
文字 内 容 ， 那 自然 宽度 正好 和 容 吉 一 致 ， 现 在 有 “内 有 文字 在 干 ”> 这 6 个 
字 ， 实 际 宽度 是 容器 宽度 和 这 6 个 字 宽 度 的 上 总和， 换行 后 的 宽度 要 想 和 
容器 冤 度 一 样 ， 那 可 真 要 徘 极 好 的 人 品 了 。 









































这 么 一 分 析 ， 上 面 平 时 很 少见 到 的 “诡异 ”现象 就 好 解释 了 。 
事情 还 没完 ， 我 们 再 看 一 个 现象 ， 假 如 是 空 的 内 联 元 素 ， 里 面 没 有 
任何 文字 ， 仅 有 一 个 <span> 标 签 : 


此 时 ， 我 们 会 发 现 居然 最 终 背 景区 域 的 宽度 和 高 度 是 不 相等 的 〈 见 
图 4-42) ， 这 不 科学 啊 ! padding:56% 相 对 宽度 计算 ， 应 该 出 来 是 个 正 
方形 啊 ， 为 何 高 度 要 高 出 一 截 呢 ? 











图 4-42” 空 内 联 元 素 padding 百 分 比值 高 宽 不 一 


原因 其 实 很 简单 : 内 联 元 素 的 垂直 padding 会 让 “幽灵 空白 节点 ” 显 
现 ， 也 就 是 规范 中 的 “strut” 出 现 。 

知道 了 原因 ， 要 解雇 此 问题 束 简 单 了 。 由 于 内 联 元 素 默 认 的 高 度 完 
全 受 font-size 大 小 控制 ， 因 此 ， 我 们 只 要 : 


span { 
padding: 56%; 


font-size: ©; 
background-color: gray; 


} 








此 时 ,“ 山 灵 空 白 节 点 ”局 度 变 成 了 6G， 局 和 宽 就 会 一 样 ， 和 块 状元 
素 一 样 的 正方 形 就 出 现 了 。 
可 以 看 到 ， 内 联 盒 模型 的 理论 知识 对 我 们 理解 内 联 元 素 的 各 种 表现 


是 非常 有 价值 的 。 这 种 理解 纯 徘 实践 ， 想 破 脑 袋 都 不 会 想 明白 为 什么 会 
这 样 。 所 以 ， 进 行 深度 学 习 是 很 有 必要 的 。 








4.2.3 ”标签 元 素 内 置 的 padding 
说 一 下 你 可 能 不 知道 的 关于 padding 的 一 些小 秘密 。 


(1) ou 列表 内 置 padding-left， 但 是 单位 是 px 不 是 em。 例 如 ， 
Chrome 浏 览 器 下 是 468gpx， 由 于 使 用 的 是 px 这 个 绝对 单位 ， 因 此 ， 如 果 
列表 中 的 font-size 大 小 很 小 ， 则 <1i> 元 素 的 项 目 符号 (如 点 或 数字 ) 
就 会 <ul>/《<ol> 元 素 的 左边 缘 距离 很 开 ， 如 果 font-size 比 较 大 ， 则 项 
目 符 号 可 能 跑 到 <ul>/<ol> 元 素 的 外 面 ， 类 似 图 4-43 所 示 的 情况 。 


1. ol/li 元 素 内 置 padding-left ,但 
是 单位 是 px 不 是 em ; 


图 4-43 ”项 目 符号 跑 到 <o1> 外 部 


根据 我 自己 的 经 验 ， 当 font-size 是 12px 至 14px 时 ，22px 是 比较 
好 的 一 个 padding-left 设 定 值 ， 所 有 浏览 器 都 能 正常 显示 ， 且 非常 贴 








ol, ul { 

padding-left: 22px; 
} 

当然 ， 如 果 视 觉 要 求 比较 高 ， 使 用 content 计 数 器 模拟 则 是 更 好 的 
选择 。 





(2) 很 多 表单 元 素 都 内 置 padding， 例 如 : 


。 所 有 浏览 器 <input>/<textarea> 输 入 框 内 置 padding; 

e。 所 有 浏览 器 cbutton> 按 钮 内 置 padding; 

。 部 分 浏览 器 <select> 下 拉 内 置 padding， 如 Firefox、IE8 及 以 上 版 
本 浏览 器 可 以 设置 padding; 

。 所 有 浏览 器 cradio>/<chexkbox> 单 复 选 框 无 内 置 padding; 

。《<button> 按 钮 元 素 的 padding 最 难 控制 ! 


我 们 着 重 看 一 下 xbutton> 按 钮 元 素 的 padding。 在 Chrome 浏 览 
下 ， 我 们 设置 : 


button { padding: 868; } 


按钮 的 padding 就 变 成 了 86， 但 是 在 Firefox 浏 览 器 下 ， 左 右 依然 
有 padding， 如 图 4-44 所 示 。 可 以 试 试 使 用 : 


button::-moz-focus-inner { padding: 6; } 





此 时 按钮 就 会 如 图 4-45 所 示 。 


加 
必 

图 4-44 ”Firefox 按钮 padding:6 效 果 有 限 
按钮 


图 4-45 ”Firefox 按 钮 padding 去 除 后 的 效果 





而 在 正 7 浏览 器 下 ， 文 字 如 果 变 多 ， 那 么 左右 padding 逐 渐变 大 ， 
如 图 4-46 所 示 。 需 要 进行 如 下 设置 : 








button { overflow: visible; } 


此 时 按钮 表现 符合 预期 ， 如 图 4-47 所 示 。 


”上 腕 钮 按钮 按钮 按钮 | 





图 4-46 ”按钮 文字 越 多 padding 越 大 


按钮 按钮 按钮 按钮 


图 4-47 ”按钮 padding 大 小 不 受 文字 个 数 的 影响 





最 后 ， 按 钮 padding 与 高 度 计 算 不 同 浏览 器 下 于 差 万 别 ， 例 如 : 


button { 
line-height: 26pX; 
padding: 16pX; 


border: none ; 





} 


结果 ， 在 Chrome 浏 览 占 下 是 预期 的 40 像 素 ， 然 而 Firefox 浏 览 器 下 是 英名 
其 妙 的 42 像 素 ， 在 IE7 浏 览 器 下 更 是 罪 夷 所 思 的 45 像 素 ， 这 使 我 们 平常 
制作 网 页 的 时 候 很 少 使 用 原生 的 <button> 按 钮 作为 点 击 按钮 ， 而 是 使 
用 <a> 标 签 来 模拟 。 但 是 ， 在 表单 中 ， 有 时候 按钮 是 自 带 交 互 行为 的 ， 
这 是 <a> 标 签 无 法 模拟 的 。 我 这 里 给 大 家 推荐 一 个 既 语义 良好 行为 保 
留 ， 同 时 UI 效 果 棒 兼容 效果 好 的 实现 小 技巧 ， 那 就 是 使 用 CIabe1> 元 
素 ，HTML 和 CSS 如 下 : 





<button id="btn"></button> 
<label for="btn" > 按钮 </L1abe1l> 


button { 
position: absolute; 
clip: rect(60 60 96 0); 


label { 
display: inline-block; 
line-height: 26pX; 
padding: 16pX; 





<label> 元 素 的 for 属 性 值 和 <button> 元 素 的 id 值 对 应 即 可 。 此 
时 ， 所 有 浏览 器 下 的 按钮 高 度 都 是 40 像 素 ， 而 且 <button> 元 素 的 行为 
也 都 保留 了 ， 是 非常 不 错 的 实践 技巧 。 





4.2.4 padding 与 图 形 绘制 





padding 属 性 和 background-clip 属 性 配合 ， 可 以 在 有 限 的 标签 下 
实现 一 些 CSS 图 形 绘制 效果 ， 我 这 里 抛砖引玉 ， 举 两 个 小 例子 ， 重 在 展 
示 可 行 性 。 


例 1: 不 使 用 伪 元 素 ， 仅 一 层 标签 实现 大 队长 的 “三 道 杠 ”分 类 图 标 
效果 。 此 效果 在 移动 端 比 较 常 见 ， 类 似 于 图 4-48 最 右边 的 小 图 标 。 


图 4-48“ 三 道 杠 ”小 图 标示 意 


我 们 可 以 使 用 类 似 下 面 的 CSS 代 码 (10 倍 大 小 模拟 〉 实 现 : 


.ijcon-menu { 
display: inline-block; 
width: 146px; height: 16px; 
padding: 35px 6; 


border-top: 16px solid; 
border-bottom: 16px solid; 
background-color: currentColor; 
background-clip: content-box; 





例 2: 不 使 用 伪 元 系 ， 仪 一 层 标 签 实现 双 层 圆 点 效果 。 此 效果 在 移 
动 端 也 比较 常见 ， 类 似 于 图 4-49， 在 多 个 广告 图 片 切 换 时 ， 用 来 标识 当 


前 显示 的 是 哪 张 图 。 





图 4-49” 双 层 圆 点 图 形 示 意 
我 们 可 以 使 用 类 似 下 面 的 CSS 代 码 (10 倍 大 小 模拟 〉 实现 : 


.Icon-dot { 
display: inline-block; 
width: 166px; height: 166pXj 
padding: 16pX; 
border: 16px solid; 


border-radius: 506%; 
background-color: currentColor; 
background-clip: content-box; 





这 两 个 例子 实现 的 图 形 效果 如 图 4-50 所 示 。 有 兴趣 可 以 自己 感受 一 
下 ， 手 动 输入 http://demo.cssworld.cn/4/2-4.php 或 者 扫 下 面 的 二 维 码 即 
司 s 








图 4-50 “三 道生 > 和 双 层 圆 点 图 形 效 果 


4.3 激进 的 margin 属 性 





padding 性 格 温和 ， 负 责 内 间距 ， 而 margin 则 比较 激进 ， 负 责 外 间 
距 。 虽 然 都 是 间距 ， 但 是 拳 别 相当 大 ， 尤 其 是 margin， 特 异 之 处 相当 
多 。 


4.3.1 _ margin 与 元 北 尺 寸 以 及 相关 布局 
1. 元 素 尺 寸 的 相关 概念 


下 面 的 内 容 会 牵扯 到 各 类 包含 “ 矿 才 ”字样 的 名 词 ， 为 了 大 家 在 阅读 
的 时 候 不 产生 困扰 ， 这 里 专门 把 相关 概念 梳理 一 下 。 


我 们 这 里 的 各 类 “尺寸 ”命名 和 对 应 的 盒子 类 型 全 部 参考 自 jQuery 中 
与 尺寸 相关 API 的 名 称 


。 元 素 尺 寸 : 对 应 jQuery 中 的 $() .width() 和 $() .height() 方 法 ， 
包括 padding 和 border， 也 就 是 元 素 的 border box 的 尺寸 。 在 原生 
的 DOM API 中 写作 offsetwidth 和 offsetHeight， 所 以 ， 有 了 时候 
也 成 为 “元 了 素 偏 移 尺 寸 ”。 

元 素 内 部 尺寸 ; 对 应 jQuery 中 的 $().innerWidth() 和 
$().innerHeight() 方 法 ， 表 示 元 素 的 内 部 区 域 尺 寸 ， 包 括 
padding 但 不 包括 border， 也 就 是 元 素 的 padding box 的 尺寸 。 在 原 
生 的 DOM API 中 写作 clientwidth 和 clientHeight， 所 以 ， 有 了 时 
候 也 称 为 “元 素 可 视 尺 寸 ”。 

。 元 素 外 部 尺寸 : 对 应 jQuery 中 的 $().outerwidth(true) 和 


$() .outerHeight(true) 方 法 ， 表 示 元 素 的 外 部 尺寸 ， 不 仅 包 括 
padding 和 border， 还 包括 margin， 也 就 是 元 素 的 margin box 的 尺 
寸 。 没 有 相对 应 的 原生 的 DOM API。 





“外 部 尺寸 "有 个 很 不 一 样 的 特性 ， 就 是 尺寸 的 大 小 有 可 能 是 负数 ， 
没 错 ， 负 尺寸 。 这 和 我 们 现实 世界 对 尺寸 的 认 知 明显 冲突 了 ， 因 为 现实 
世界 没有 什么 物体 的 尺寸 是 负 的 。 所 以 ， 我 忆 是 把 “外 部 尺寸 ”理解 


为 “元 素 占 据 的 空间 尺寸 "， 把 概念 从 “尺寸 "转换 到 “空间 ”， 这 时 候 就 容 
易 理 解 多 了 。 


2. margin 与 元 素 的 内 部 尺寸 





margin 同 样 可 以 改变 元 素 的 可 视 尺 寸 ， 但 是 和 padding 几 乎 是 互补 
态势 。 什 么 意思 呢 ?” 对 于 padding， 元 素 设 定 了 width 或 者 保持 “包裹 
性 ”的 时 候 ， 会 改变 元 素 可 视 尺 寸 ; 但 是 对 于 margin 则 相反 ， 元 素 设 定 
了 width 值 或 者 保持 “ 包 于 性 ”的 时 候 ，margin 对 尺寸 没有 影响 ， 只 有 元 
素 是 “充分 利用 可 用 空间 ”状态 的 时 候 ，margin 才 可 以 改变 元 素 的 可 视 尺 
寸 。 











比方 说 ， 如 下 CSS: 


.father { 
width: 368px; 


margin: 6 -28px; 











此 时 元 际 宽 度 还 是 300 像 素 ， 矿 十 无 变化 。 因 为 只 要 宽度 设 定 ，margin 
就 无 法 改变 元 素 尺寸 ， 这 和 padding 是 不 一 样 的 。 





但 是 ， 如 果 是 下 面 这 样 的 HTML 和 CSS: 


<div class="father"> 
<div class="son"></div> 


</div> 
.father { width: 366px; } 
.Son { margin: 6 -26px; } 








则 .son 元 素 的 宽度 就 是 340 像 素 了 ， 尺 寸 通过 负 值 设 置 变 大 了 ， 因 为 此 
时 的 宽度 表现 是 “充分 利用 可 用 空间 ”。 








或 者 这 么 说 吧 ， 只 要 元 素 的 尺寸 表现 符合 “充分 利用 可 用 空间 ”， 无 
论 是 垂直 方向 还 是 水 平方 向 ， 都 可 以 通过 margin 改 变 尺 寸 。 





CSS 世 界 默认 的 流 方 向 是 水 平方 向 ， 因 此 ， 对 于 普通 流体 元 
素 ，margin 只 能 改变 元 素 水 平方 同 尺 寸 ， 但 是 ， 对 于 具有 拉 伸 特性 的 
绝对 定位 元 素 ， 则 水 平 或 垂直 方向 都 可 以 ， 因 为 此 时 的 尺寸 表现 符 
合 “ 充 分 利用 可 用 空间 ”。 这 在 4.3.4 节 会 继续 深入 。 











由 于 margin 具 有 这 种 流体 特性 下 的 改变 尺寸 特性 ， 因 此 ，margin 
可 以 很 方便 地 实现 很 多 流体 布局 效果 。 例 如 ， 一 侧 定 宽 的 两 栏 自 适 应 布 
局 效果 ， 假 设 我 们 定 宽 的 部 分 是 128 像 素 宽 的 图 片 ， 自 适应 的 部 分 是 文 


er 


子 -。o 








(1) 如 果 图 片 左 侧 定位 : 


{ overflow: hidden; } 
> img { float: left; } 
> p { margin-left: 146px; } 


class="box"> 
<img src="1.jpg"> 
<p> 文 字 内 容 .. .</p> 
</div> 





此 时 ， 文 字 内 容 就 会 根据 .box 盒 子 的 宽度 变化 而 自动 排列 ， 形 成 目 适 应 
布局 效果 ， 无 论 盒子 是 200 像 际 还 是 400 像 系 ， 布 局 依然 恨 好 ， 不 会 像 纯 
浮动 布局 那样 及 生 错 位 。 


(2) 如 果 图 片 右 侧 定位 只 要 图 片 的 左 浮动 改 成 右 浮 动 ， 文 字 内 
容 的 左 margin 改 成 右 margin 即 可 。 


.box { overflow: hidden; } 


.box > img { float: right; } 
.box > p { margin-right: 146px; } 





HTML 和 上 和 面 的 左 侧 定位 效果 一 模 一 样 ， 最 终 实现 的 也 是 一 个 效果 
民 好 的 自 适 应 布局 。 然 而 ， 这 里 的 实现 有 一 点 瑕 六 ， 那 就 是 元 素 在 
DOM 文 档 流 中 的 前 后 顺序 和 视觉 表现 上 的 前 后 顺序 不 一 致 。 什 么 意思 
呢 ? 我 们 这 里 的 图 片 是 右 浮动 ， 视 觉 表 现在 .box 的 右 侧 ， 但 是 图 片 相 关 
的 HIML 代 码 却 在 前 面 。 这 个 相反 的 位 置 关 系 有 时 候 会 给 其 他 同事 造成 
一 些 困 难 。 所 以 ， 如 果 想 要 实现 顺序 完美 一 致 的 自 适 应 效果 ， 可 以 借助 
margin 负 值 定 位 实现 。 














(3) 如 果 图 片 石 侧 定位 ， 同 时 顺序 一 致 : 


.box { overflow: hidden; } 

.full { width: 166%; float: left; } 

.box > img { float: left; margin-left: -128px; } 
.full > p { margin-right: 146px; } 

<div class="box"> 


<div class="full"> 
<p> 文 字 内 容 .. .</p> 
</div> 
<img src="1.jpg"> 
</div> 





如 打 对 以 上 3 种 实现 效果 有 兴趣 ， 可 以 手动 输入 


http://demo.cssworld.cn/ 4/3-1.php 或 者 扫 右 侧 的 二 维 码 。 





我 们 还 可 以 利用 margin 改 变 元 素 尺寸 的 特性 来 实现 两 端 对 齐 布局 
效果 。 列 表 是 我 们 Web 开 发 中 是 非常 常见 的 ， 一 般 都 是 通过 循环 遍历 呈 
现 出 来 的 ， 也 就 是 实际 上 每 个 列表 的 HTML 样式 都 是 一 致 的 。 现 在 有 这 
样 一 个 需求 : 列表 块 两 端 对 齐 ， 一 行 显示 3 个 ， 中 间 有 2 个 20 像 素 的 间 
际 。 假 如 我 们 使 用 浮动 来 实现 ，CSS 代 码 可 能 是 下 面 这 样 : 








li tf 
float: left; 
width: 166pX; 
margin-right: 28px; 





此 时 就 遇 到 了 一 个 问题 ， 即 最 右 侧 永远 有 个 20 像 素 的 间隙 ， 无 法 完 
美 实现 两 端 对 齐 ， 如 图 4-51 所 示 。 
列表 2 列表 3 
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择 不 去 的 问 承 





图 4-51 右 侧 间隙 示意 
如 果 不 考虑 IE8， 我 们 可 以 使 用 CSS3 的 nth-of-type 选 择 器 : 


li:nth-of-type(3n) { 
margin-right: 6; 


} 


但 如 果 需 要 兼容 IE8 那 么 nth-of-type 就 无 能 为 力 了 。 要 么 专门 使 
用 JavaScript 打 个 补丁 ， 要 么 列表 HTML 输 出 的 时 候 给 符合 3n 的 <1i> 标 
签 加 个 类 名 。 例 如 .1i-third: 
.1i-third { 


margin-right: ©; 


} 

然而 这 种 技术 选 型 ， 需 要 HTML 逮 辑 和 CSS 样 式 相互 配合 才能 
效 ， 相 比 纯 CSS 控 制 而 言 后 期 风险 和 维护 成 本 提高 了 一 倍 ， 那 有 没有 更 
好 的 实现 方法 呢 ? 

有 ! 我 们 可 以 通过 给 父 容器 添加 margin 属 性 ， 增 加 容器 的 可 用 宽 
度 来 实现 。 


ul { 
margin-right: -26px; 


} 
ul > li { 


float: left; 

width: 1660pX; 

margin-right: 268px; 
} 





此 时 <ul> 的 宽度 就 相当 于 166%+28px， 于 是 ， 第 3n 的 <1i> 标 签 的 
margin-right: 28px 束 多 了 20 像 素 的 使 用 空间 ， 正 好 列表 的 右边 缘 就 





是 父 级 <ulL> 容 器 100% 宽 度 位 置 ， 两 端 对 齐 效果 就 此 实现 了 ， 如 图 4-52 
所 示 。 
列表 2 列表 3 
7 





父 级 尝 走 间 降 


图 4-52 ” 右 侧 间 隐 被 父 容器 带 走 了 
3. margin 与 元 素 的 外 部 尺寸 


对 于 普通 块 状元 素 ， 在 默认 的 水 平流 下 ，margin 只 能 改变 左右 方 
回 的 内 部 尺寸 ， 垂 直方 同 则 无 法 改变 。 如 果 我 们 使 用 writing-mode 改 
变 流 同 为 垂直 流 ， 则 水 平方 向 内 部 尺寸 无 法 改变 ， 垂 直方 网 可 以 改变 。 
这 是 由 margin:auto 的 计算 规则 决定 的 。 


但 是 ， 对 于 外 部 尺寸 ，margin 属 性 的 影响 则 更 为 广泛 ， 只 要 元 素 
具有 块 状 特性 ， 无 论 有 没有 设置 width/height， 无 论 是 水 平方 向 还 是 
垂直 方向 ， 即 使 发 生 了 margin 合 并 ，margin 对 外 部 尺寸 都 着 着 实 实 发 
生 了 影响 。 只 是 很 多 时 候 ， 抛 开 定位 而 言 ， 我 们 似乎 对 外 部 尺寸 的 变化 
不 是 很 敏感 ， 实 际 上 ，CSS 世 界 中 不 少 炉 手 的 问题 都 是 需要 借助 margin 
的 外 部 尺寸 特性 来 实现 的 。 





前 面 讲 padding 的 时 候 ， 我 们 说 过 它 没有 什么 兼容 性 问题 。 实 际 
上 ，padding 是 有 不 兼容 的 ， 只 是 这 个 不 兼容 不 沼 过 到， 即使 过 到 ， 也 
很 容易 被 不 太 敏 感 的 人 “一 笔 带 过 ”。 此 兼容 问题 描述 为 : 如 果 容 器 可 以 
深 动 ， 在 正和 Firefox 浏 览 器 下 是 会 忽略 padding-bottom 值 的 ，Chrome 
等 浏览 右 则 不 会 。 也 就 是 说 ， 在 斑 和 Firefox 浏 览 器 下 : 





<div style="height:166pxj padding:56px 6; "> 


<img src="0.jpg" ”height="366"> 
</div> 





底部 没有 50 像 素 的 padding-bottom 间 隙 ， 如 图 4-53 所 示 。 





图 4-53” ”padding-bottom 被 滚动 容器 忽略 





此 兼容 性 差异 的 本 质 区 别 在 于 Chrome 浏览 器 是 子 元 素 超 过 content 
box 尺 寸 触 发 滚动 条 显示 ， 而 I 和 Firefox 浏 览 器 是 超过 padding box 尺 寸 
触发 滚动 条 显示 。 





由 于 规范 中 并 没有 找到 准确 的 说 明 ， 因 此 ， 浏 览 器 之 间 不 同 的 做 法 
不 能 说 遍 对 识 错 ， 可 以 看 成 是 一 种 “未 定义 行为 "。 一 般 而 言 ， 开 发 人 员 
更 喜欢 Chrome 的 做 法 ， 因 为 其 更 好 理解 。 总 之 ， 不 管 怎样 ， 深 动容 器 
压 部 留 白 使 用 padding 是 不 推荐 的 ， 因 为 兼容 性 是 个 大 问题 。 但 是 ， 我 
们 可 以 借助 margin 的 外 部 尺寸 特性 来 实现 底部 留 日 ， 代 码 如 下 : 





<div style="height:266pXx; ”> 


<img height="366”style= "margin:56pXx 86; "> 
</div> 





结果 所 有 浏览 器 都 成 功 留 日 ， 如 图 4-54 所 示 。 





Wh 


图 4-54 margin-bottom 滚 动 留 白 





记 住 了 ， 只 能 使 用 子 元 素 的 margin-bottom 来 实现 滚动 容器 的 底部 
留 白 
ss] o 


下 面 再 举 一 个 利用 margin 外 部 尺寸 实现 等 高 布局 的 经 典 案例 。 此 
布局 多 出 现在 分 栏 有 背景 色 或 者 中 间 有 分 隔 线 的 布局 中 ， 有 可 能 左 侧 栏 
内 容 多 ， 也 有 可 能 右 侧 栏 内 容 多 ， 但 无 论 内 容 多 少 ， 两 栏 背景 色 都 和 容 
器 一 样 高 。 





由 于 height:166% 需 要 在 父 级 设 定 共 体高 度 值 时 才 有 效 ， 因 此 我 们 
需要 使 用 其 他 技巧 来 实现 。 方 法 其 实 很 多 ， 例 如 使 用 display:table- 
cel1 布 局 ， 左 右 两 栏 作 为 单元 格 处 理 ， 或 者 使 用 border 边 框 来 模拟 ， 
再 或 者 使 用 我 们 这 里 的 margin 负 值 实 现 ， 核 心 CSS 代 码 如 下 : 
.column-box { 

overflow: hidden; 


.Column-left, 


.Column-right { 
margin-bottom: -9999px; 
padding-bottom: 9999px; 

} 





要 看 演示 效果 ， 可 以 手动 输入 http://demo.cssworld.cn/4/3-2.php 或 者 
扫 下 面 的 二 维 码 。 点 击 按钮 增 减 左右 两 栏 的 内 容 改 变 高 度 就 会 发 现 ， 无 
论 是 左 侧 内 容 多 还 是 右 侧 内 容 多 ， 两 栏 的 背景 高 度 都 是 一 样 的 ， 如 图 4- 
55 所 未 。 











图 4-55 ”等 高 布局 效果 示意 


下 面 问 题 来 了 : 为 什么 可 以 实现 等 高 呢 ? 


牌 直 方向 margin 无 法 改变 元 素 的 内 部 尺寸 ， 但 却 能 改变 外 部 尺 


寸 ， 这 里 我 们 设置 了 margin-bottom: -9999px 意 味 着 元 素 的 外 部 尺寸 

在 垂直 方 同 上 小 了 9999px。 默 认 情 况 下 ， 垂 直方 疝 块 级 元 素 上 下 距离 

是 9， 一 旦 margin-bottom:-9999px 就 意味 着 后 面 所 有 元 素 和 上 面 元素 
ee a 也 就 是 后 面 元 素 都 往 上 移动 了 9999px。 此 
时 ， 通 过 神 来 一 笔 padding-bottom:9999px 增 加 元 素 高 度 ， 这 正 负 一 
抵消 ， 对 布局 层 并 无 影响 ， 但 却 融 来 了 我 们 需要 的 东西 一 一 视觉 层 多 了 
9999px 高 度 的 可 使 用 的 背景 色 。 但 是 ，9999px 太 大 了 ， 所 以 需要 配合 
父 级 overflow:hidden 把 多 出 来 的 色 块 背景 隐藏 掉 ， 于 是 实现 了 视觉 

上 的 等 高 布局 效果 。 











使 用 margin 负 值 实现 等 高 布局 的 优势 在 于 兼容 性 足够 ， 耻 6 浏览 
也 支持 ， 且 支持 任意 个 分 栏 等 高 布局 。 本 例 中 ，padding- 
bottom:9999px 也 可 以 用 border-bottom: 9999px solid 
transparent 代 人 奉 ， 不 过 IE7 以 上 浏览 器 才 文 持 。 大 家 可 以 根据 实际 场 
景 选择 使 用 。 














不 过 ，margin 负 值 实现 等 高 布局 也 有 不 足 之 处 : 首先 ， 如 果 需 要 
有 子 元素 定 位 到 容器 之 外 ， 父 级 的 overflow:hidden 是 一 个 棘手 的 限 
制 ， 其 次 ， 当 触发 锚 点 定位 或 者 使 用 DOM.scrollIntoview() 方 法 的 时 
候 ， 可 能 就 会 出 现 奇怪 的 定位 问题 ， 根 本 原因 参见 6.4 节 。 





顺便 说 说 使 用 border 和 table-cel1 的 优 缺 点 : 前 者 优势 在 于 兼容 
性 好 ， 没 有 锚 点 定位 的 隐患 ， 不 足 之 处 在 于 最 多 3 栏 ， 且 由 于 border 不 
支持 百分比 宽度 ， 因 此 只 能 实现 至 少 一 侧 定 宽 的 布局 ，table-cel1 的 
优点 是 天 然 等 高 ， 不 足 在 于 正 8 及 以 上 版 本 浏览 器 才 支 持 ， 所 以 ， 如 果 
项 目 无 须 兼 容 耻 6、IE7， 则 推荐 使 用 table-cel1 实 现 等 高 布局 。 








上 述 margin 对 尺寸 的 影响 是 针对 具有 块 状 特性 的 元 素 而 言 的 ， 对 
于 纯 内 联 元 素 则 不 适用 。 和 padding 不 同 ， 内 联 元 素 垂直 方向 的 margin 
是 没有 任何 影响 的 ， 既 不 会 影响 外 部 尺寸 ， 也 不 会 影响 内 部 尺寸 ， 有 种 
石沉大海 的 感觉 。 对 于 水 平方 向 ， 由 于 内 联 元 素 宽度 表现 为 “ 包 于 性 ”， 
也 不 会 影响 内 部 尺寸 。 











4.3.2 ” margin 的 百分比 值 





和 padding 属 性 一 样 ，margin 的 百分比 值 无 论 是 水 平方 向 还 是 垂直 
方向 都 是 相对 于 宽度 计算 的 。 不 过 相对 于 padding，margin 的 百分比 值 
的 应 用 价值 就 低 了 一 截 ， 根 本 原因 在 于 和 padding 不 同 ， 元 素 设 
置 margin 在 垂直 方向 上 无 法 改变 元 素 自 身 的 内 部 尺寸 ， 往 往 需 要 父 元 
素 作 为 载体 ， 此 外 ， 由 于 margin 合 并 的 存在 ， 垂 直方 向 往往 需要 双 倍 
尺寸 才能 和 padding 表 现 一 致 。 例 如 : 











.box { 
background-color: olive; 
overflow: hidden; 


} 


.box > div { 


margin: 506%; 


<div class="box"> 
<div></div> 
</div> 








结果 .box 是 一 个 宽 高 比 为 2:1 的 橄榄 绿 长 方形 。 是 不 是 有 点 儿 奇 怪 : 
50%+50% 应 该 是 100%， 应 该 上 下 一 样 ， 是 1:1 的 正方 形 ， 怎 么 最 后 是 2:1 
的 长 方形 呢 ? 


这 就 涉及 下 面 一 节 margin 合 并 的 内 容 了 。 


4.3.3 ”正确 看 待 CSS 世 界 里 的 margin 合 并 
1. 什么 是 margin 合 并 
块 级 元 素 的 上 外 边 距 (margin-top) 与 下 外 边 距 (margin- 


bottom) 有 时 会 合并 为 单个 外 边 距 ， 这 样 的 现象 称 为 “margin 合 并 ”。 
从 此 定义 上 ， 我 们 可 以 捕获 两 点 重要 的 信息 。 











(1) 块 级 元 素 ， 但 不 包括 浮动 和 绝对 定位 元 系 ， 尽 管 浮动 和 绝对 
定位 可 以 让 元 素 块 状 化 。 





(2) 只 发 生 在 垂直 方向 ， 需 要 注意 的 是 ， 这 种 说 法 在 不 考虑 
writing-mode 的 情况 下 才 是 正确 的 ， 严 格 来 讲 ， 应 该 是 只 发 生 在 和 当 
前 文档 流 方向 的 相 垂直 的 方向 上 。 由 于 默认 文档 流 是 水 平流 ， 因 此 发 
生 margin 合 并 的 就 是 垂直 方 问 。 





2. margin 合 并 的 3 种 场景 





margin 合 并 有 以 下 3 种 场景 。 


(1) 相 邻 兄弟 元 素 margin 合 并 。 这 是 margin 合 并 中 最 常见 、 最 基 
本 的 ， 例 如 : 


p { margin: lem 6; } 
<p> 第 一 行 </p> 





<p> 第 二 行 </py> 





则 第 一 行 和 第 二 行 之 间 的 间距 还 是 lem， 因 为 第 一 行 的 margin-bottom 
和 第 二 行 的 margin-top 合 并 在 一 起 了 ， 并 非 上 下 相 加 。 


(2) 父 级 和 第 一 个 /最 后 一 个 子 元 系 。 我 们 直接 看 例子 ， 在 默认 状 


态 下 ， 下 面 3 种 设置 是 等 效 的 : 


<div class="father"> 
<div class="son" style="margin-top:86px;"></div> 
</div> 


<div class="father" style="margin-top:86px;"> 


<div class="son"></div> 
</div> 


<div class="father" style="margin-top:86px;"> 
<div class="son" style="margin-top:806px;"></div> 
</div> 





在 实际 开发 的 时 候 ， 给 我 们 带 来 麻烦 的 多 半 就 是 这 里 的 父 


子 margin 合 3 


比方 说 ， 现 在 流行 官网 使 用 一 张 帅 帅 的 大 图 ， 然 后 配 上 大 大 的 网 站 
标题 。 由 于 这 个 标题 一 般 在 头 图 中 间 的 某 位 置 ， 因 此 ， 我 们 很 自然 会 想 
到 使 用 margin-top 定 位 ， 然 后 问题 就 来 了 。 因 为 发 生 了 “奇怪 ”的 事 
情 ， 头 图 居然 掉 下 来 了 ! 针对 此 现象 ， 我 特意 制作 了 一 个 实例 ， 手 动 输 
入 http://demo.cssworld.cn/ 4/3-3.php 或 者 扫 右 侧 的 二 维 码 。 








里 大 家 需要 理 清 


[ey 


问题 产生 的 原因 就 是 这 里 的 父子 margin 合 # 


楚 “ 合 并 ”这 个 概念 。 如 果 我 们 按照 中 文 释义 理解 ， 应 该 必须 有 多 个 对 象 
才能 进行 合并 ， 人 否则 根本 就 没有 “ 合 ” 这 一 次 ， 确 实 如 此 。 但 是 ， 这 样 理 
解 也 有 可 能 会 带 来 这 样 一 个 误区 ， 即 你 要 出 点 儿 力 ， 我 要 出 点 儿 力 ， 才 
叫 “ 合 ”， 其 实 不 然 。 放 到 我 们 这 里 ， 这 个 父子 margin 合 并 的 案例 上 惑 
是 : 父 元 素 没 有 出 一 点 力 ， 子 元 素 出 了 全 部 的 力 ， 然 后 最 终 的 margin 
全 部 合 到 了 父 元 素 上 。 世 就 是 虽然 是 在 子 元 素 上 设置 的 margin-top， 
但 实际 上 就 等 同 于 在 父 元 素 上 设置 了 margin-top， 我 想 这 样 大 家 就 能 
理解 为 何 头 图 会 掉 下 来 了 吧 。 但 是 有 一 点 需要 注意 , “等 同 于 ”并 不 

是 “就 是 ”的 意思 ， 我 们 使 用 getComputedStyle 方 法 获取 父 元 素 的 
margin-top 值 还 是 CSS 属 性 中 设置 值 ， 并 非 margin 合 并 的 表现 值 。 

















那 该 如 何 阻 止 这 里 margin 合 并 的 发 生 呢 ? 


对 于 margin-top 合 并 ， 可 以 进行 如 下 操作 (满足 一 个 条 件 即 
可 ) : 


。 父 元 素 设 置 为 块 状 格式 化 上 下 文 元 素 ; 

。 父 元 素 设置 border-top 值 ; 

。 父 元 素 设 置 padding-top 值 ; 

。 父 元 素 和 第 一 个 子 元 素 之 间 添 加 内 联 元 兹 进行 分 隅 。 





对 于 margin-bottom 合 并 ， 可 以 进行 如 下 操作 “〔〈 满 足 一 个 条 件 即 


。 父 元 素 设 置 为 块 状 格式 化 上 下 文 元 素 ; 
。 父 元 素 设 置 border-bottom 值 ; 
。 父 元 素 设置 padding-bottom 值 ; 





。 父 元 素 和 最 后 一 个 子 元 素 之 间 添 加 内 联 元 素 进 行 分 隔 ; 
。 父 元 素 设 置 height、min-height 或 mnax-height。 


所 以 ， 上 面 因 为 margin 合 并 导致 头 图 掉 下 来 的 问题 可 以 腔 加 下 面 
的 CSS 代 码 进行 修复 : 
.Container { 


overflow: hidden; 


} 





其 原理 就 是 通过 设置 overflow 属 性 让 父 级 元 素 块 状 格式 化 上 下 文 ， 这 
在 6.4 节 会 有 深入 的 探讨 。 





说 到 此 处 ， 妨 不 住 再 多 说 几 句 。jQuery 中 有 
个 $().slideUp()/$().slideDown() 方 法 ， 如 果 在 使 用 这 个 动画 效果 
的 时 候 ， 发 现 这 内 容 在 动画 开始 或 结束 的 时 候 会 跳 一 下 ， 那 八 九 不 离 十 
就 是 布局 存在 margin 人 合并。 跳动 之 所 以 产生 ， 就 是 因为 jQuery 的 
slideUp 和 slideDown 方 法 在 执行 的 时 候 会 被 对 象 元 素 添 
加 overflow:hidden 设 置 ， 而 overflow:hidden 会 阻止 margin 合 并 ， 
于 是 一 瞬间 间距 变 大 ， 产 生 了 跳动 。 





(3) 空 块 级 元 素 的 margin 合 并 。 例 如 ， 下 面 CSS 和 HTML 代 码 : 


.father { overflow: hidden; } 
.Son { margin: 1lem 6; } 


<div class="father"> 
<div class="son"></div> 
</div> 








结 采 ， 此 时 .father 所 在 的 这 个 父 级 <div> 元 素 高 度 仅仅 是 lem， 
为 .son 这 个 空 <div> 元 素 的 margin-top 和 margin-bottom 合 并 在 一 起 





了 。 这 也 是 上 一 站 margin:56% 最 终 宽 高 比 是 2:1 的 原因 ， 因 为 垂直 方 问 
的 上 下 margin 值 合 二 为 一 了 ， 所 以 垂直 方向 的 外 部 尺寸 只 有 水 平方 向 
的 一 半 。 





这 种 空 块 级 元 素 的 margin 合 并 特性 即使 自身 没有 设置 margin 也 是 
会 发 生 的 ， 所 谓 “ 合 * 并 不 一 定 要 自己 出 力 ， 只 要 出 人 就 可 以 。 比 方 说 ， 
我 们 一 开始 的 “ 相 邻 兄弟 元 素 margin 合 并 ， 其 实 ， 就 算 兄弟 不 相 邻 ， 也 
是 可 以 发 生 合并 的 ， 前 提 是 中 间 插 手 的 也 是 个 会 合并 的 家 伙 。 比 方 说 : 








p { margin: lem 6; } 
<p> 第 一 行 </p> 


<div></div> 
<p> 第 二 行 </p> 














此 时 第 一 行 和 第 二 行 之 间 的 距离 还 是 lem， 中 间 看 上 去 隔 了 一 个 <divy> 
元 素 ， 但 对 最 终 效 果 却 没有 任何 影响 。 如 果 非 要 细 究 ， 则 实际 上 这 里 发 
生 了 3 次 margin 合 并 ，<div> 和 第 一 行 <p> 的 margin-bottom 合 并 ， 然 
后 和 第 二 行 <p> 的 margin-top 合 并 ， 这 两 次 合并 是 相 邻 兄弟 合并 。 由 于 
上 自身 是 空 <div>， 于 是 前 两 次 合并 的 margin-bottom 和 margin-top 再 
次 合并 ， 这 次 合并 是 空 块 级 元 素 合 并 ， 于 是 最 终 间 距 还 是 1lem。 











根据 我 多 年 开发 的 经 验 ， 由 于 空 块 级 元 素 的 margin 合 并 发 生 不 愉 
快 事情 的 情况 非常 之 少 。 一 来 ， 我 们 很 少 会 在 页 面 上 放置 没什么 用 的 
空 <div>; 二 来 ， 即 使 使 用 空 <div> 也 是 画 画 分 隔 线 之 类 的 ， 一 般 都 是 
使 用 border 属 性 ， 正 好 可 以 阻 断 margin 合 并 ; 三 来 ，CSS 开 发 人 员 普 
裔 没有 margin 上 下 同时 开工 的 习惯 ， 比 方 说 一 个 列表 ， 间 踊 都 是 一 样 
的 ， 开 发 人 员 一 般 都 是 单独 设 定 margin-top 或 margin-bottom 值 ， 
为 这 会 让 他 们 内 心 觉 得 更 安全 。 于 是 ， 最 终 ， 空 块 级 元 素 的 margin 合 

















并 惑 变 成 了 一 个 对 CSS 世 界 有 着 上 共有 巨大 意义 但 大 多 数 人 都 不 知道 的 特 
性 


如 果 有 人 不 希望 空 <div> 元 素 有 margin 人 合并， 可 以 进行 如 下 操作 : 


设置 垂直 方向 的 border; 

设置 垂直 方向 的 padding; 

里 面 添加 内 联 元 素 〈 直 接 Space 键 空格 是 没 用 的 ) ; 
设置 height 或 者 min-height。 


3. margin 合 并 的 计算 规则 


我 把 margin 合 并 的 计算 规则 总 结 为 “ 正 正 取 大 值 “ 正 负 值 相 加 ”人 负 
负 最 负 值 ”3 句 话 。 下 面 来 分 别 举例 说 明 。 





(1) 正 正 取 大 值 。 如 果 是 相 邻 兄弟 合并 : 


.dad { margin-bottom: S56px; } 
.b { margin-top: 26px; } 


<div class="a"></a> 
<div class="b"></a> 





此 时 .a 和 .b 两 个 <div> 之 间 的 间距 是 586px， 取 大 的 那个 值 。 


如 末 是 父子 合并 : 


.father { margin-top: 26px; } 
.Son { margin-top: 56px; } 


<div class="father"> 
<div class="son"></div> 
</div> 








此 时 .father 元 素 等 同 于 设置 了 margin-top:56px， 取 大 的 那个 值 。 


如 末 是 自身 合并 : 


.dt 
margin-top: 28px; 


margin-bottom: 56pX; 


} 


<div class="a"></div> 





则 此 时 .a 元 素 的 外 部 尺寸 是 58px， 取 大 的 那个 值 。 


(2) 正 负 值 相 加 。 如 有 果 是 相 邻 兄弟 合并 : 





margin-bottom: 56px; } 
margin-top: -26px; } 
class="a"></a> 
class="b"></a> 





此 时 .a 和 .b 两 个 <div> 之 间 的 间距 是 38px， 是 -28px+58px 的 计算 值 。 
如 果 是 父子 合并 : 


.father { margin-top: -26px; } 
.Son { margin-top: 56px; } 
<div class="father"> 

<div class="son"></div> 
</div> 








此 时 .father 元 素 等 同 于 设置 了 margin-top:36px， 是 -26px+56px 的 
计算 值 。 


如 末 是 自身 合并 : 


.aa 
margin-top: -20pX; 


margin-bottom: 56pX; 
} 


<div class="a"></div> 





则 此 时 .a 元 素 的 外 部 尺寸 是 38px， 是 -29px+56px 的 计算 值 。 


(3) 负 负 最 负 值 。 如 果 是 相 邻 兄弟 合并 : 





margin-bottom: -56px; } 
margin-top: -26px; } 


class="a"></a> 
class="b"></a> 





此 时 .a 和 .b 两 个 <div> 之 间 的 间距 是 -56px， 取 绝对 负 值 最 大 的 值 。 
如 果 是 父子 合并 : 


.father { margin-top: -26px; } 
.Son { margin-top: -56px; } 
<div class="father"> 

<div class="son"></div> 
</div> 








此 时 .father 元 素 等 同 于 设置 了 margin-top:-56px， 取 绝对 负 值 最 大 
的 值 。 


如 果 是 自身 合并 : 


.aa 
margin-top: -260pX; 


margin-bottom: -56pX; 


} 


<div class="a"></div> 





则 此 时 .a 元 素 的 外 部 尺寸 是 -56px， 取 绝对 负 值 最 大 的 值 。 
4. margin 合 并 的 意义 


我 之 前 曾 见 到 类 似 这 样 的 说 法 :“margin-top 合 并 bug。” 这 种 说 法 


征 大 有 问题 的 , “margin-top 合 并 ”这 种 特性 是 故意 这 么 设计 的 ， 在 实 
际 内 容 呈 现 的 时 候 是 有 痢 重 要 意义 的 ， 根 本 就 不 是 bug! 不 要 遇 到 出 卑 
自己 意料 或 者 自己 无 法 理解 的 现象 就 称 其 为 bug。 








CSS 世 界 的 CSS 属 性 是 为 了 更 好 地 进行 图 文 信息 展示 而 设计 的 ， 博 
客 文 章 或 者 新 闻 信 息 是 图 文 信息 的 典型 代表 ， 基 本 上 离 不 开 下 面 这 些 
HTML: 








<h2> 文 章 标题 </h2> 
<p> 文 章 段落 1.. .</p> 
<p> 文 章 段落 2.. .</p> 
<U]> 


<1i> 列 表 1</1Liy> 

<1i> 列 表 2</1Liy> 

<1i> 列 表 3</1Liy> 
</U]> 








而 这 里 的 <h2>、x<p>、《<u1> 默 认 全 部 都 是 有 垂直 方 各 的 margin 值 的 ， 
而 且 单 位 全 部 都 是 em。 首 先 解释 一 下 为 何 需要 margin 值 。 其 实 原 因 很 
简单 ，CSS 世 界 的 设计 本 意 就 是 图 文 信息 展示 ， 有 了 默认 的 margin 值 ， 
我 们 的 文章 、 新 闻 就 不 会 挤 在 一 起 ， 垂 直方 向 就 会 层次 分 明 、 段 落 有 
致 ， 阅 读 体 验 就 会 好 ! 为 何 使 用 em 作为 单位 也 很 好 理解 ， 大 家 应 该 知道 
浏览 器 默认 的 字号 大 小 是 可 以 自 定 义 的 吧 ， 例 如 ， 默 认 的 是 16 像 素 ， 假 
如 我 们 设置 成 更 大 号 的 字号 ， 同 时 HTML 标 签 的 margin 是 像素 大 小 ， 则 
会 发 生 文字 变 大 但 是 间距 不 变 的 情况 ， 原 本 段落 有 致 的 阅读 体验 必然 又 
会 变 得 令 人 室 息 。em 作 为 相对 单位 ， 则 可 以 让 我 们 的 文章 或 新 闻 无 论 多 
大 的 字体 都 排版 良好 。 可 以 看 到 ，HTML 标 签 默 认 内 置 的 CSS 属 性 值 完 
全 就 是 为 了 更 好 地 进行 图 文 信息 展示 而 设计 的 。 





























我 们 平时 进行 网 站 开 友 的 时 候 部 会 重 置 各 种 默认 的 margin 尺 寸 ， 











这 是 件 需要 好 好 审视 的 事情 ， 对 于 绝 大 多 数 网 站 ， 确 实 需 要 做 这 样 的 处 
理 ， 因 为 这 些 网 站 鲜 有 传统 的 图 文 信息 展示 区 域 。 但 是 ， 如 果 你 的 站 点 
古 博客 、 新 闻 门 户 或 公众 号 文章 ， 我 们 应 该 做 的 是 统一 标签 的 margin 
大 小 ， 而 不 是 一 股 脑 地 重 置 成 8。 





下 面 说 说 margin 合 并 的 意义 。 对 于 兄 第 元 素 的 margin 合 并 其 作用 
和 em 类 似 ， 都 是 让 图 文 信息 的 排版 更 加 舒服 自然 。 假 如 说 没有 margin 
合并 这 种 说 法 ， 那 么 连续 段落 或 列表 之 类 首尾 项 间距 会 和 其 他 兄弟 标签 
成 1:2 关 系 ; 文章 标题 距离 顶部 会 很 近 ， 而 和 下 面 的 文章 详情 内 容 距 离 
又 会 很 开 ， 就 会 造成 内 容 上 下 间距 不 一 致 的 情况 。 这 些 都 是 糟糕 的 排版 
体验 。 而 合并 机 制 可 以 保证 元 素 上 下 间距 一 致 ， 无 论 是 <h2> 标 题 这 种 
margin 偏 大 的 元 素 ， 还 是 中 规 中 和 矩 的 <p> 元 素 ， 因 为 “ 正 正 取 大 值 ”。 




















父子 margin 合 并 的 意义 在 于 : 在 页 面 中 任何 地 方 租 套 或 直接 放 入 
任何 神 <div>， 部 不 会 影响 原来 的 块 状 布局 。<div> 是 网 页 布局 中 非常 
常用 的 一 个 元 素 ， 其 语义 是 没有 语义 ， 也 就 是 不 代表 任何 特定 类 型 的 内 
容 ， 是 一 个 通用 型 的 具有 流体 特性 的 容器 ， 可 以 用 来 分 组 或 分 隔 。 由 于 
其 作用 融 是 分 组 的 ， 因 此 ， 从 行为 表现 上 来 看 ， 一 个 纯粹 的 <div> 元 素 
古 不 能 够 也 不 可 以 影响 原先 的 布局 的 。 现 在 有 如 下 一 段 HTML: 











<div style="margin-top:26px;"></div> 


请 问 : 现在 要 在 上 面 这 段 HTML 的 外 面 再 藤 套 一 层 <div> 元 素 ， 假 如 说 
现在 没有 父子 margin 合 并 ， 那 这 层 新 从 套 的 <div> 岂 不 阻 断 了 原本 的 兄 
种 margin 合 并 ? 很 有 可 能 间距 就 会 变 大 ， 受 受 地 影响 了 原来 的 布局 ， 

这 显然 束 违 背 7 了 <div> 的 设计 作用 了 。 所 以 才 有 了 父子 margin 合 并 ， 外 














面 再 藤 套 一 层 <div> 元 素 就 跟 没 舱 套 一 样 ， 表 现 为 nargin-top:26px 就 
好 像 是 设置 在 最 外 面 的 <div> 元 素 上 一 样 。 


目 身 margin 合 并 的 意义 在 于 可 以 避免 不 小 心 遗 落 或 者 生成 的 空 标 
签 影响 排版 和 布局 。 例 如 : 


<p> 第 一 行 </p> 
<p></p> 
<p></p> 





<p></p> 
<p></p> 
<p> 第 二 行 </p> 








其 和 下 面 这 段 HTML 最 终 视觉 效果 是 一 模 一 样 的 : 


<p> 第 一 行 </p> 
<p> 第 二 行 </p> 








奉 是 没有 自身 margin 合 并 特性 的 话 ， 怕 是 上 面 的 HTML 第 一 行 和 第 








二 行 之 间 要 隅 了 很 多 行 吧 。 


知道 了 margin 合 并 的 意义 以 及 作用 ， 而 且 合 并 规则 的 兼容 性 良 
好 ， 所 以 ， 我 自己 平时 网 页 制作 的 时 候 ， 遇 到 列表 或 者 模块 ， 全 部 都 是 
保留 上 下 margin 设 置 。 例 如 : 


.list { 
margin-top: 15px; 


margin-bottom: 15px; 


} 





而 不 是 战 战 闫 闫 地 使 用 : 


.list { 
margin-top: 15px; 


J 
因为 margin 合 并 特性 ， 所 以 我 们 无 须 担 心 列表 之 间 的 间距 会 很 

大 。 不 会 的 ， 残 是 15px! 相反 ， 这 种 设置 让 我 们 的 页 面 结构 容错 性 更 强 

了 ， 比 方 说 最 后 一 个 元 素 移 除 或 位 置 调换 ， 均 不 会 破坏 原来 的 布局 ， 也 

就 是 我 们 的 CSS 无 须 做 任何 调整 。 











4.3.4 ”深入 理解 CSS 中 的 margin:auto 


下 面 讲 讲 margin:auto 的 作用 机 制 。 首先， 我 们 需要 知道 下 面 这 些 








(1) 有 时 候 元 素 就 算 没 有 设置 width 或 height， 也 会 自动 填充 。 
例如 : 


此 <div> 守 上 度 就 会 自动 填 满 容器 。 








(2) 有 时 候 元 素 就 算 没 有 设置 width 或 height， 也 会 自动 填充 对 
应 的 方位 。 例 如 : 


div { 
position: absolute; 


left: 8; right: 6; 
} 








此 时 <div> 宽 度 就 会 自动 填 满 包含 块 容器 。 


此 时 ， 如 果 设 置 width 或 height， 自 动 填充 特性 就 会 被 覆盖 。 例 
如 : 


div { width: 266px; } 


此 时 ，<div> 宽 度 被 限制 成 了 2869px， 无 法 自动 填充 外 部 容器 的 可 用 宽 
度 了 。 








假设 外 部 的 容器 宽度 是 3886px， 则 有 1868px 的 宽度 原本 应 该 自动 填 
满 的 ， 现 在 因为 width 设置 而 闲置 ， 而 margin:auto 就 是 为 了 填充 这 个 
闲置 的 尺寸 而 设计 的 ! 


margin:auto 的 填充 规则 如 下 。 
(1) 如 果 一 侧 定 值 ， 一 侧 auto， 则 auto 为 剩余 空间 大 小 。 


(2) 如 果 两 侧 均 是 auto， 则 平分 剩余 空间 。 





上 面 这 两 条 规则 中 第 二 条 可 能 大 家 都 知道 ， 但 古 第 一 条 怕 是 知道 的 
人 就 不 多 了 。 我 们 来 看 一 个 例子 : 





.father { 
width: 3660pX; 


.Son { 


width: 266px; 
margin-right: 86pX; 
margin-left: auto; 





请 问 : 此 时 .son 的 左右 边 距 计算 值 是 多 少 ? 


如 果 是 对 margin:auto 没 有 一 定 深入 了 解 的 人 人， 可 能 会 认为 左边 距 
68、 石 边 距 168px， 实 际 上 不 是 的 ， 应 该 是 左边 距 28px、 石 边 中 8 
86px。margin 的 'auto' 可 不 是 摆设 ， 是 具有 强烈 的 计算 意味 的 关键 





字 ， 用 来 计算 元 素 对 应 方向 应 该 获得 的 剩余 间距 大 小 。 璧 如 这 里 ， 总 剩 
余 间距 大 小 是 168 px， 其 中 margin-right 使 用 了 88@ px， 那 自 
然 margin-left 的 'auto' 计 算 值 就 是 剩余 的 206px 了 。 








眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/4/3-4.php 或 者 扫 右 侧 的 
二 维 码 。 效 果 如 图 4-56 所 示 。 


由 于 CSS 世 界 中 margin 的 初始 值 大 小 是 se， 因此 ， 上 面 的 例子 如 果 
margin-right 缺 失 ， 实 现 的 效果 正好 是 块 级 元 素 的 右 对 齐 效果 。 也 就 


.SOn { 
width: 2660pX; 


margin-left: auto; 





} 


效果 如 图 4-57 所 示 。 





图 4-56 ”margin 单 侧 值 为 auto 表 现 示意 


























图 4-57 margin-left:auto 实 现 的 右 对 齐 效果 





所 以 ， 如 果 想 让 某 个 块 状元 素 右 对 齐 ， 脑 子 里 不 要 就 一 
个 float:right， 很 多 时 候 ，margin-left:auto 才 是 最 佳 的 实践 ， 浮 
动 毕 竟 是 个 “小 魔鬼 ”。 我 甚至 可 以 这 么 说 : margin 属 性 的 auto 计 算 就 
是 为 块 级 元 素 左 中 右 对 齐 而 设计 的 ， 和 内 联 元 素 使 用 text-align 控 制 
左 中 右 对 齐 正 好 遥相呼应 ! 








居中 对 齐 左右 同时 auto 计 算 即 可 ，CSS 如 下 : 


.Son { 
width: 266px; 
margin-right: auto; 


margin-left: auto; 


} 








je 左右 边 距 痢 是 586px， 因 为 对 立方 加 都 是 auto 的 时 候 剩余 间距 等 
， 所 以 左右 间距 一 样 ， 形 成 大 中 效果 。 


虽然 知道 了 margin:auto 的 计算 规则 ， 但 有 人 还 是 会 有 一 些 疑问 ， 








比方 说 : 为 什么 明明 容 喜 定 高 、 元 素 定 高 ，margin:auto 却 无 法 垂直 居 
中 ? 


.father { 
height: 266pX; 


} 

.Son { 
height: 166px; 
margin: auto; 





} 


原因 在 于 触发 mnargin:auto 计 算 有 一 个 前 提 条 件 ， 就 是 width 
或 height 为 auto 时 ， 元 素 是 具有 对 应 方向 的 自动 填充 特性 的 。 比 方 说 
这 里 ， 假 如 说 把 .son 元素 的 height :166px 去 掉 ，.son 的 高 度 会 自动 和 
父 元 素 等 高 变 成 298px 吗 ? 显然 不 会 ! 因此 无 法 触发 nargin:auto 计 
算 ， 故 而 无 法 垂直 居中 。 








可 能 有 人 叉 会 问 了 : 我 们 垂直 方 同 margin 无 法 实现 大 中 了 吗 ? 当 
然 是 可 以 的 ， 而 且 场 景 还 不 止 一 种 。 





第 一 种 方法 是 使 用 writing-mode 改 变 文档 流 的 方向 : 


.father { 
height: 266pX; 
writing-mode: vertical-lr; 


} 

.Son { 
height: 166px; 
margin: auto; 


} 





此 时 .son 就 是 垂直 居中 对 齐 的 ， 但 是 这 也 带 来 另外 的 问题 ， 就 是 水 平方 
向 无 法 auto 居 中 了 。 





所 以 ， 有 人 会 关心 有 没有 让 水 平 垂直 同时 居中 的 方法 。 有 ， 束 是 这 
里 要 提 的 第 二 种 方法 ， 绝 对 定位 元 素 的 margin:auto 居 中 。 下 面 我 们 边 
解释 为 何 居中 边 展 示 效 果 。 首 先 ， 下 面 的 CSS 代 码 : 


.father { 
width: 366pxj height:1586px; 
position: relative; 


} 
.Son { 

position: absolute; 

top: 6; right: 6; bottom: 6;j left: ©; 
} 








此 时 .son 这 个 元 系 的 尺寸 表现 为 “格式 化 宽度 和 格式 化 高 有 度 "”， 和 <div> 
的 “正常 流 宽度 "一样 ， 同 属于 外 部 太 寸 ， 也 惑 是 矿 才 目 动 填充 父 级 元 素 
的 可 用 尺寸 ， 此 时 我 们 给 .son 设置 尺寸 。 例 如 : 








.Son { 
position: absolute; 
top: 6; right: 6; bottom: 6;j left: ©; 
width: 266px; height: 166pX; 

} 








此 时 宽 高 被 限制 ， 原 本 应 该 填充 的 空间 就 被 空余 了 出 来 ， 这 多 余 的 
空间 就 是 margin:auto 计 算 的 空间 ， 因 此 ， 如 果 这 时 候 我 们 再 设置 一 
个 margin:auto: 

.SOn { 


position: absolute; 
top: 6; right: 6; bottom: 6;j left: ©; 


width: 266px; height: 166pX; 
margin: auto; 














那么 我 们 这 个 .son 元 素 就 水 平方 向 和 垂直 方向 同时 居中 了。 因为 auto 


正好 把 上 下 左右 剩余 空间 全 部 等 分 了 ， 自 然 就 居中 ， 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/4/3-5.php 或 者 扫 下 面 的 
二 维 码 。 效 果 如 图 4-58 所 示 。 














图 4-58 绝对 定位 元 素 下 的 margin:auto 居 中 对 齐 效果 


由 于 绝对 定位 元 又 的 格式 化 高 度 即 使 父 元 素 height:auto 也 是 文 持 
的 ， 因 此 ， 其 应 用 场景 可 以 相当 广泛 ， 可 能 唯一 的 不 足 就 是 此 居中 计算 
IE8 及 以 上 版 本 浏览 器 才 文 持 。 至 少 对 我 来 讲 ， 如 果 项 目 无 须 兼 容 IE7 浏 
览 器 ， 绝 对 定位 下 的 margin:auto 居 中 是 我 用 得 最 频繁 的 块 级 元 素 垂 直 
居中 对 齐 方式 ， 比 top:56% 然 后 margin 负 一 半 元 素 高 度 的 方法 要 好 使 得 
多 。 








最 后 ， 还 有 一 个 大 家 可 能 关心 的 问题 ， 假 如 说 这 里 面 的 元 素 尺 寸 比 
外 面 的 大 ， 那 这 个 auto 该 怎么 计算 呢 ? 





很 简单 ， 如 果 里 面 元 素 矿 寸 大 ， 说 明 剩 余 可 用 空间 都 没有 了 ， 会 被 


当 作 @ 来 处 理 ， 也 就 是 auto 会 被 计算 成 9，， 其 实 束 等 于 没有 设置 margin 
属性 值 ， 因 为 margin 的 初始 值 就 是 8。 





另外 ， 对 于 蔡 换 元 素 ， 如 果 我 们 设置 display:block， 
则 margin:auto 的 计算 规则 同样 适合 。 


4.3.5 ” margin 无 效 情形 解析 


因为 margin 属 性 的 诺 多 特 民 性， 所以， 我 们 在 实际 开发 的 时 候 ， 
经 常会 遇 到 设置 的 margin 无 效 的 情形 ， 这 里 我 罗列 一 下 ， 和 希望 大 家 遇 
到 类 似 的 问题 知道 原因 以 及 如 何 对 症 下 药 。 


(1) display 计 算 值 inline 的 非 蔡 换 元 素 的 垂直 margin 是 无 效 
的 ， 虽 然 规 范 提 到 有 泻 染 ， 但 浏览 器 表现 却 未 寻 得 一 点 踪迹 ， 这 和 
padding 是 有 明显 区 别 的 。 对 于 内 联 蔡 换 元 系 ， 垂 直 margin 有 效 ， 并 且 
没有 margin 合 并 的 问题 ， 所 以 图 乒 永 远 不 会 发 生 margin 合 并 。 











(2) 表格 中 的 <tr> 和 <td> 元 素 或 者 设置 display 计 算 值 是 table- 
cell 或 table-row 的 元 素 的 margin 都 是 无 效 的 。 但 是 ， 如 果 计 算 值 
是 table-caption、table 或 者 jnline-table 则 没有 此 问题 ， 可 以 通 
过 margin 控 制 外 间距 ， 甚 至 : :first-letter 伪 元 素 也 可 以 解析 


margin。 


(3) margin 合 并 的 时 候 ， 更 改 margin 值 可 能 是 没有 效果 的 。 以 父 
子 margin 重 登 为 例 ， 假 设 父 元 素 设置 有 margin-top:56px， 则 此 时 子 
元 素 设 置 margin-top:36px 就 没有 任何 效果 表现 ， 除 非 大 小 比 56px 
大 ， 或 者 是 负 值 。 








(4) 绝对 定位 元 素 非 定 位 方位 的 margin 值 “无 效 "”。 什 么 意思 呢 ? 
很 多 时 候 ， 我 们 对 元 素 进 行 绝 对 定位 的 时 候 ， 只 会 设置 1 一 2 个 相 邻 方 
位 。 例 如 : 











img { top: 16%; left: 36%;} 








此 时 right 和 bottom 值 属于 auto 状 态 ， 也 就 是 右 侧 和 底部 没有 进行 定 
位 ， 此 时 ， 这 两 个 方向 设置 margin 值 我 们 在 页 面 上 是 看 不 到 定位 变化 
的 。 例 如 : 





img { 
top: 16%; left: 306%; 


margin-right: 36px; 
} 








此 时 margin-right:36px 几 乎 就 是 摆设 。 是 margin 没 起 作用 吗 ? 实际 

上 不 是 的 ， 绝 对 定位 元 素 任意 方位 的 margin 值 无 论 在 什么 场景 下 都 一 

直 有 效 。 壁 如 这 个 例子 ， 假 设 cimg> 宽 度 76%， 同 时 父 元 素 是 具有 定位 

属性 ， 且 overflow 设 置 为 auto 的 元 素 ， 则 此 时 就 会 出 现 水 平 深 动 条 ， 
因为 margin-right:36px 增 加 了 图 片 的 外 部 尺寸 。 

















sy 一 般 情 况 下 没有 效果 呢 ? 主要 是 因为 绝对 定位 元 素 的 演 染 
是 独立 的 ， 普 通 元 素 和 兄弟 元 素 是 心 连 心 ， 你 动 我 也 动 ， 但 是 绝对 定位 
0 a 译 ， 因 此 ，margin 无 法 影响 
兄弟 元 素 定 位 ， 所 以 看 上 去 就 “无 效 ”。 








(5) 定 高 容器 的 子 元 素 的 margin-bottom 或 者 宽度 定 死 的 子 元 素 
的 margin-right 的 定位 “失效 ”。 


我 们 先 看 例子 : 


<div class="box"> 
<div class="child"></div> 
</div> 
.box { 
height: 166px; 


} 
.Child { 
height: 86pX; 
margin-bottom: 106pX; 
} 





这 里 ，margin-bottom:168px 古 不 会 在 容器 底部 形成 968px 的 外 间距 
的 ， 看 上 去 束 像 是 “失效 ”一 样 ， 同 样 的 HTML，CSS 代 码 如 下 : 


.box { 
width: 166px; 


} 

.Child { 
width: 86px; 
margin-right: 166px; 


} 





此 时 ，margin-right:168px 对 元 素 的 定位 也 没有 任何 有 影响， 给 人 “无 
效 ” 的 感觉 ， 实 际 上 ， 这 个 现象 的 本 质 和 上 面 绝对 定位 元 素 非 对 立方 
位 margin 值 “< 无效” 类 似 。 原 因 在 于 ， 若 想 使 用 margin 属 性 改变 自身 的 
位 置 ， 必 须 是 和 当前 元 素 定位 方 同一 样 的 margin 属 性 才 可 以 ， 否 

则 ，margin 只 能 影响 后 面 的 元 素 或 者 父 元 素 。 





























例如 ， 一 个 普通 元 素 ， 在 默认 流下 ， 其 定位 方向 是 左 侧 以 及 上 方 ， 
此 时 只 有 margin-left 和 margin-top 可 以 影响 元 素 的 定位 。 但 是 ， 如 
果 通 过 一 些 属 性 改变 了 定位 方向 ， 如 float:right 或 者 绝对 定位 元 素 的 
right 右 侧 定 位 ， 则 反 过 来 margin-right 可 以 影响 元 素 的 定 














位 ，margin-1left 只 能 影响 兄弟 元 素 。 








在 本 例 中 ， 父 容器 只 有 一 个 子 元 素 ， 因 此 没有 影响 兄 第 元 素 的 说 
法 ， 加 上 要 么 定 宽 要 么 定 高 ， 右 侧 和 的 部 无 margin 草 合 ， 因 此 外 部 的 
元 素 也 不 会 有 任何 布局 上 的 影响 ， 因 此 就 给 和 “无效” 的 错觉 ， 实 际 上 
古 margin 目 身 的 特性 导致 ， 有 演 染 只 是 你 看 不 到 变化 而 已 。 








(6) 甘 长 黄 及 导致 的 margin 无 效 。 我 们 直接 看 下 面 这 个 例子 : 


<div class="box"> 
<img src="mm1.jpg"> 
<p> 内 容 </p> 

</div> 





.box > img { 


float: left; 
width: 256px; 
} 
.box > pi 
overflow: hidden; 
margin-left: 266px; 
} 





其 中 的 margin-1left:266px 是 无 效 的 ， 准 确 地 讲 ， 此 时 的 <p> 的 
margin-1left 从 负 无 穷 到 256px 都 是 没有 任何 效果 的 。 要 解释 这 里 为 何 
会 无 效 ， 需 要 对 float 和 overflow 深 入 理解 ， 而 这 两 个 属性 都 是 后 面 的 
内 容 ， 因 此 ， 深 入 原因 分 析 我 们 将 在 6.4 节 介绍 。 


(7) 内 联 特 性 导致 的 margin 无 效 。 我 们 直接 看 下 面 这 个 例子 : 





<div class="box"> 
<img src="mm1.jpg"> 
</div> 
.box > img { 
height: 96px; 
margin-top: -2060pX; 


| 
这 里 的 例子 也 很 有 代表 性 。 一 个 容器 里 面 有 一 个 图 片 ， 然 后 这 张 图 
片 设 置 margin-top 负 值 ， 让 图 片上 偏 移 。 但 是 ， 随 着 我 们 的 负 值 越 来 
越 负 ， 结 果 达 到 某 一 个 具体 负 值 的 时 候 ， 图 片 不 再 往 上 偶 移 了 。 比 方 
说 ， 本 例 margin-top 设 置 的 是 -269px， 如 果 此 时 把 margin-top 设 置 
成 -38688px， 图 片 会 再 往 上 偏 移 169px 吗 ? 不 会 ! 它 会 微 丝 不 
动 ，margin-top 变 得 无 效 了 。 要 解释 这 里 为 何 会 无 效 ， 需 要 对 
vertical-align 和 内 联 盒 模型 有 深入 的 理解 ， 而 这 vertical-align 
是 后 面 的 内 容 ， 因 此 ， 深 入 原因 分 析 我 们 将 在 5.3 节 介绍 。 这 里 大 家 先 
记 住 有 这 么 一 个 margin 失 效 的 场景 即 可 。 











4.4 功勋 时 越 的 border 属 性 


顾名思义 ，border 束 是 “边框 ”"， 从 名 字 就 可 以 看 出 来 CSS 设 计 者 设 
计 此 属性 的 目的 就 是 给 元 素 弄 个 边框 什么 的 。 但 是 ，CSS 世 界 中 很 多 大 
受 欢 迎 的 属性 之 所 以 受 欢迎 ， 并 不 是 因为 其 本 职工 作 做 得 很 好 ， 而 是 衍 
生出 来 的 特性 可 以 用 来 解雇 很 多 环 手 的 问题 。border 属 性 就 是 典型 代 
表 之 一 。 我 总 是 称赞 border“ 功 勋 里 越 ?， 正 是 因为 border 属 性 在 图 形 
构建 、 体 验 优化 以 及 网 页 布局 这 块 几 大 放 异 彩 ， 同 时 保证 其 良好 的 兼容 
性 和 稳定 的 特性 表现 才 得 此 荣 炊 的， 如果 就 老 老 实 实 画 个 框框 ， 就 不 可 
能 称赞 它 “ 功 勋 卓越 ”。 





下 面 我 们 一 起 看 看 border 都 有 哪些 精彩 的 特性 表现 。 
4.4.1 为 什么 border-width 不 支持 百分比 值 


虽然 同属 盒 模 型 基本 成 员 ， 但 是 porder-width 却 不 支持 百分比 。 
例如 ? 设置 : 


div { border-width: 56%; } 


是 无 效 的 ， 直 接 声 明 无 效 。 这 一 点 和 margin 和 padding 都 不 一 样 ， 下 面 
问题 来 了 : 为 什么 border-width 不 支持 百分比 呢 ? 








有 人 说 不 好 解析 、 不 好 表现 。 在 我 看 来 ， 是 没有 这 个 问题 的 ， 直 接 
和 margin 和 padding 一 样 ， 全 部 相对 于 宽度 计算 就 好 了 ， 没 有 任何 这 染 
上 的 难度 。 之 所 以 不 文 持 ， 在 我 看 来 是 语义 和 使 用 场景 决定 的 。 





首先 看 语义 。 顾 名 思 义 ，border-width 是 “边框 宽度 ”， 我 们 先 来 
看 看 现实 世界 的 物体 的 边框 ， 假 设 我 们 现在 有 两 台数 码 设备 ， 分 别 是 
iMac 和 iPhone， 很 显然 ， 这 两 台 设 备 的 尺寸 差异 很 大 ， 但 是 ， 大 家 仔细 
对 比 就 会 发 现 ， 这 两 者 的 边框 大 小 差别 跟 屏幕 设备 相 比 较 而 言 就 可 以 忽 
略 不 计 了 。 看 到 没 ， 所 谓 “ 边 框 ”"， 是 不 会 因为 设备 大 就 按 比 例 变 大 的 。 
因此 ， 如 果 支 持 百 分 比值 ， 是 不 是 就 意味 着 设备 大 了 边框 也 跟着 变 大 ? 
这 显然 不 合 “ 边 框 ” 的 语义 嘛 ! 然后 再 看 使 用 场景 ， 虽 然 说 如 果 border- 
width 支 持 百 分 比值 布局 什么 的 能 做 的 事情 就 更 多 了 ， 但 是 ， 我 们 要 想 
到 CSS 世 界 创造 的 背景 主要 是 为 图 文 展 示 服 务 的 ， 有 一 张 图 片 ， 大 片区 
域 都 是 白色 的 ， 在 白 底 背景 上 和 文字 混在 一 起 ， 就 会 有 一 片 奇怪 的 空白 
区 域 ， 会 让 人 产生 没 对 齐 的 假象 ， 此 时 ， 我 们 给 这 张 图 片 套 个 1px 灰 色 
边框 ， 区 域 就 明显 了 ， 对 吧 ! 设计 的 初衷 就 是 为 了 这 么 点 儿 事 ， 没 有 需 
要 使 用 百分比 值 的 场景 。 于 是 ， 综 合 这 两 点 ， 造 成 了 border-width 不 
支持 百分比 值 。 























其 实 还 有 很 多 CSS 属 性 ， 如 outline、box-shadow、text-shadow 
等 ， 都 是 不 支持 百分比 值 的 ， 原 因 也 与 此 类 似 。 


我 们 平常 使 用 border-width 几 乎 全 是 固定 的 数值 ， 如 border- 
width:1px 之 类 ， 但 是 ， 可 能 有 些 人 并 不 知道 border-width 还 文 持 若 
干 关键 字 ， 包 括 thin、medium《〈 默 认 值 ) 和 thick， 对 应 的 尺寸 大 小 
具体 如 下 。 





。thin: 注 注 的 ， 等 同 于 1px。 
。medium (默认 值 ): 薄 厚 均匀 ， 等 同 于 3px。 
。thick: 厚 厚 的 ， 等 同 于 4px。 


不 知道 大 家 有 没有 想 过 这 么 一 个 问题 : 为 什么 border 属 性 的 默认 
宽度 大 小 是 medium， 也 就 是 3px， 明 明 thin (1px) 宽度 更 常用 吧 ? 
为 什么 呢 ?” 因 为 ......border-style:double 至 少 3px 才 有 效 
果 ! border-style...double? 我 好 像 只 知道 solid、dashed 和 


dotted， 这 double 是 个 什么 ? 
下 面 我 们 一 起 看 看 border-style 的 一 些 有 趣 的 故事 。 


4.4.2 了 解 各 种 border-style 类 型 
1. border-style:none 

注意 ，border-style 的 默认 值 是 none， 有 一 部 分 人 可 能 会 误 以 为 
是 solid。 这 也 是 单纯 设置 border-width 或 border-color 没 有 边框 显 
示 的 原因 ， 如 下 示意 : 





div { border: 16px; } /* 无 边框 出 现 */ 
div { border: red; } /* 无 边框 出 现 */ 





如 果 是 porder-style 类 型 值 则 边框 出 现 。 例 如 ， 下 面 CSS 会 出 现 3 
像素 宽 的 边框 : 








div { border: solid; } /* 有 边框 出 现 */ 





平时 我 们 使 用 border-style:none 多 出 现在 重 置 边框 样式 的 时 
候 ， 例 如 ， 实 现 一 个 没有 下 边框 的 边框 效果 : 
div { 


border: 1px solid; 
border-bottom: none; 





} 


当然 ， 我 们 也 可 以 通过 下 接 设置 边框 宽度 为 6 进行 重 置 : 


div { 
border: 1px solid; 


border-bottom: ©; 
} 








当然 ， 如 果 你 是 一 个 “性 能 控 ?， 可 以 两 个 一 起 写 ， 根 据 前 辈 的 训 
试 ， 这 样 写 泻 染 性 能 最 高 : 


div { 
border: 1px solid; 
border-bottom: 6 none; 


} 





2. border-style:solid 
这 个 大 家 耳熟能详 ， 妇 换 缘 知 ， 实 线 边框 ， 没 什么 好 说 的 。 
3. border-style:dashed 


虚线 边框 可 以 说 是 使 用 频率 第 二 高 的 边框 类 型 了 ， 人 至 于 使 用 没什么 
好 说 的 ， 倒 是 这 边框 本 映 的 一 些 泻 染 数据 挺 有 意思 。 这 虚线 项 色 区 的 宽 
高 比 以 及 颜色 区 和 透明 区 的 宽度 比例 在 不 同 浏览 器 下 是 有 差异 的 。 例 
如 ， 在 Chrome 和 Firefox 浏 览 器 下 ， 颜 色 区 的 宽 高 比 是 3:1， 闫 色 区 和 透 
明 区 的 宽度 比例 是 1:1， 如 图 4-59 所 示 ; 而 下 浏览 器 则 是 男 外 的 数据 ， 闫 
色 区 的 宽 高 比 是 2:1， 颜 色 区 和 透明 区 的 宽度 比例 也 是 2:1， 如 图 4-60 所 


人 钞 。 


Lk 


图 4-59 Chrome 浏览 器 下 虚线 边框 一 些 比例 数据 





2:1 


图 4-60 ”下 浏 览 嚣 下 虚线 边框 一 些 比 例 数据 








本 身 就 是 方 方 正 下 的， 再 加 上 羔 容 性 的 差异 ， 基 本 上 就 只 能 当 作 虚 
框 来 用 了 。 


4. border-style:dotted 





虚 点 边框 在 表现 上 同样 有 兼容 性 差异 ， 虽 然 规 范 上 明确 表示 是 个 圆 
点 ， 但 是 Chrome 以 及 Firefox 浏 览 器 下 虚 点 实际 上 是 个 小 方 点 ， 如 图 4-61 
所 示 ; 而 还 浏览 器 下 则 是 小 圆 点 ， 如 图 4-62 所 示 。 


a border-style: dotted 





图 4-61 Chrome 浏览 器 下 点 线 边框 样式 





。border-style: dotted; 。 


图 4-62” 正 浏览 器 下 点 线 边框 样式 





同样 一 样 事 物 ， 在 有 些 人 眼中 是 一 扫 而 过 ， 但 在 有 些 人 眼中 却 是 如 


获 至 宝 。 不 知 大 家 对 上 面 的 虚 点 边框 表现 都 怎么 看 呢 ? 有 没有 什么 地 方 
让 你 怀 然 心动 的 呢 ? 


反正 ， 我 是 眼前 一 亮 了 ， 亮 在 什么 地 方 呢 ? 就 是 正 浏 览 器 下 的 虚 点 
征 个 圆 ! 对 ， 圆 ， 难 道 还 意识 不 到 吗 ? 众所周知 ，CSS 圆 角 属 
性 border-radius 从 IE9 浏 览 器 才 开 始 文 持 ，IE8 这 些 浏览 器 要 想 实 现 辆 
角 ， 要 么 用 图 片 要 么 使 用 复杂 生 涩 的 VML， 但 是 ，dotted 类 型 边框 天 
然 束 是 一 个 圆 ， 那 我 们 要 想 在 IE8 浏 览 器 下 实现 圆 角 效果 ， 是 不 是 束 轻 
松 多 了 呢 ? 





例如 ， 下 面 的 CSS: 


.dotted { 
width: 156px; height: 156pX; 


border: 149px dotted #Ccd6060 | 
} 





则 此 时 的 表现 如 图 4-63 所 示 。 此 时 的 样式 表现 就 是 4 个 规整 的 圆 点 ， 此 
时 ， 我 们 只 需要 配合 overflow:hidden， 让 其 中 3 个 点 隐藏 ， 则 圆 角 效 
果 就 实现 了 ， 如 图 4-64 所 示 。 








149px dotted 





图 4-63” 正 浏览 器 4 个 虚 点 











图 4-64 ”隐藏 3 个 圆 点 即 可 实现 圆 角 效果 





使 用 CSS 代 码 表示 就 是 : 


.box { 
width: 156px; height: 156pX; 
/* 超出 区 域 隐藏 ， 只 显示 一 个 圆 */ 
overflow: hidden; 











.dotted { 
width: 166%; height: 166%; 
border: 149px dotted #cd066060; 
} 





但 是 ， 上 面 的 方法 只 能 实现 正 圆 圆 角 ， 如 果 想 实现 任意 大 小 的 圆 角 
该 怎么 办 ? 


其 实 也 不 难 ， 我 们 不 是 有 4 个 圆 点 吗 ， 正 好 可 以 作为 圆 角 的 4 个 角 ， 
再 履 盖 2 层 官 形 实 色 《〈 如 图 4-65 黑 线 线 框 部 分 区 域 所 示 ) ， 就 实现 了 小 
圆 角 效果 了 。 





图 4-65 ”任意 大 小 圆 角 实现 示意 


5. border-style:double 

双 线 边框 ， 顾 名 思 义 ， 即 两 根 线 且 为 实 线 。 虽 然 平 常 我 们 使 用 少 ， 
但 是 其 兼容 性 非常 好 。 视 觉 表现 为 线 框 一 一 透明 线 框 ， 根 据 border- 
width 大 小 不 同 ， 其 表现 规则 如 表 4-2 所 示 。 








表 4-2 border-style:double 表 现 规则 


本 TT 
lpx 0+1-0 一 一 
3px 1+1+1 
Spx ?+1-=2 
7px 2+3+2 


从 表 4-2 可 以 看 到 ， 当 边框 宽度 是 1px 和 2px 的 时 候 ， 其 表现 和 


border-style:solid 是 一 模 一 样 的 : 当 边 框 为 3px 的 时 候 ， 才 开始 有 

双 线 边框 的 表现 ， 包 括 retina 屏 幕 也 是 如 此 ， 因 为 边框 宽度 是 没有 半 像 

素 的 概念 的 。 还 记 不 记得 上 一 节 留 下 的 问题 ,，“ 为 什么 border-width 的 
默认 值 是 media (3px) ? ”答案 就 在 这 里 ， 虽 然 说 实际 开发 的 时 候 1px 

大 小 的 solid 类 型 边框 是 最 常用 的 ， 但 是 却 无 法 让 double 类 型 边框 有 合 
乎 语义 的 表现 ， 因 此 使 用 了 能 表现 doub1le 类 型 的 最 小 边框 宽度 3px 作 为 
边框 宽度 默认 值 。 





根据 表 4-2， 我 们 还 可 以 用 一 句 话 总 结 出 border-style:double 的 
表现 规则 : 双 线 宽度 永远 相等 ， 中 间 间 隔 +1。 





于 是 ， 我 们 就 可 以 借助 border-style:double 实 现 一 些 等 宽 的 图 
形 效果 。 例 如 ， 等 比例 “三 道 杠 ”图标 效果 如 图 4-66 所 示 。 

















图 4-66 “三 道 杠 ”小 图 标示 意 


CSS 代 人 码 如 下 : 


.ijcon-menu { 
width: 126px; 
height: 26pX; 


border-top: 66px double; 
border-bottom: 26px solid; 





6. 其 他 border-style 类 型 


inset (内 凹 ) 、outset (外 凸 )、groove ( 沟 槽 ) 、ridge ( 山 
疹 ) 风格 老 士 过 时 ， 且 兼容 性 惨不忍睹 〈 见 图 4-67) 。 因 此 ， 它 们 没有 
任何 实用 价值 。 但 是 ， 它 们 也 不 是 一 无 是 处 ， 这 几 个 边框 类 型 的 出 现 无 
形 中 规范 了 实 线 边框 的 转角 连接 规则 。 规 范 中 并 没有 任何 关于 边框 连接 
规则 的 描述 ， 按 照 一 般 的 套路 ， 浏 览 器 会 表现 不 一 ， 类 似 虚 线 之 类 边框 
确实 如 此 ， 但 是 ， 对 于 so1id 类 型 边框 ， 各 个 浏览 器 却 像 是 约定 好 了 ， 
连接 表现 一 致 ， 背 后 起 作用 的 恰恰 是 这 几 个 看 上 去 没有 任何 作用 的 
border-style 类 型 。 这 为 border 图 形 生 成 技术 的 广泛 应 用 打下 了 坚实 
的 基础 。 











IE Chrome Firefox 





图 4-67 inset、outset、groove、ridge 各 浏览 器 表现 截图 
4.4.3 border-color 和 color 


border-color 有 一 个 很 重要 也 很 实用 的 特性 ， 就 是 “border- 
color 默 认 颜 色 就 是 color 色 值 "。 具 体 来 讲 ， 就 是 当 没 有 指定 border- 
color 颜 色 值 的 时 候 ， 会 使 用 当前 元 素 的 color 计 算 值 作为 边框 色 。 例 








如 ， 下 面 这 个 例子 : 


.box { 
border: 16px solid; 


color: red; 


} 





此 时 ，.box 元 素 的 16px 边 框 颜色 就 是 红色 。 


具有 类 似 特性 的 CSS 属 性 还 有 out1line、box-shadow 和 text- 


机 
shadow 等 。 


那 这 种 特性 对 于 实际 开发 有 没有 什么 作用 呢 ? 我 们 直接 看 一 个 例 
子 ， 我 们 在 上 传 图 片 的 时 候 ， 往 往 后 面 会 跟着 一 个 市 有 加 号 的 框框 按 
钮 ， 表 示 可 以 继续 传 图 ， 如 图 4-68 所 示 ， 然 后 hover 的 时 候 会 变 个 色 。 








图 4-68 ” 带 加 号 的 上 传 按钮 





这 种 方 方 正 正 、 简 简单 单 的 图 形 最 适合 使 用 三 三 两 两 的 CSS 代 码 绘 
制 了 。 通 常 ， 正 常 思 维 下 ， 我 们 都 是 使 用 width/height 外 加 一 
个 background-color 绘 制 加 号 的 ， 核 心 CSS 代 人 码 如 下 : 





.add { 
border: 2px dashed #ccc; 


} 
.add:before, .add:after { 
background: #ccc; 


} 

/* hover 变 色 */ 

.add:hover { 
border-color: #066C; 


.add:hover:before, .add:hover:after { 
background: #66C; 





功能 没有 任何 问题 ， 唯 独 当 我 们 hover 变 色 的 时 候 ， 需 要 同时 重 置 
3 处 (元 素 本 身 以 及 两 个 伪 元 素 ) 颜色 。 实 际 上 ， 如 果 这 里 不 是 使 
用 background-color， 而 是 使 用 border 来 绘制 加 号 ， 则 代码 要 简单 得 
多 ， 如 下 : 





.add { 
color: #ccc; 
border: 2px dashed; 


} 
.add:before { 
border-top: 16px solid; 


} 
.add:after { 
border-left: 16px solid; 


} 

/* hover 变 色 */ 

.add:hover { 
color: #066C; 





} 


可 以 看 到 ， 使 用 border 实 现 ， 我 们 hover 变 色 的 时 候 ， 只 需要 重 置 
1 处 ， 也 就 是 重 置 元 素 本 身 的 color 就 可 以 了 。 因 为 整个 图 形 都 是 使 
用 border 绘 制 的 ， 同 时 颜色 缺 省 ， 所 以 所 有 图 形 颜色 自动 跟着 一 起 变 
J 





中 





图 4-69 ”加 号 按钮 鼠标 经 过 效果 


效果 演示 地 址 是 http:/demo.cssworld.cn/4/4-1.php 。hover 效 果 如 图 
4-69 所 示 O 


4.4.4 border 与 透明 边框 技巧 


虽然 color:transparent 在 IE9 以 上 版 本 的 浏览 器 才 支 持 ， 但 
是 border-color: transparent 在 IE7 浏 览 器 就 开始 支持 了 ， 于 是 ， 我 
们 解决 一 些 环 手 问题 的 思路 就 更 加 开阔 了 。 


1. 右 下 方 background 定 位 的 技巧 


在 CSS3 新 世界 还 没 到 来 的 时 候 ，background 定 位 有 一 个 比较 大 的 
局 限 性 ， 束 是 只 能 相对 左上 和 角 数 值 定位 ， 不 能 相对 右 下 角 。 这 种 特性 有 
时 候 会 给 我 们 的 工作 带 来 一 点 儿 欣 烦 。 举 个 例子 ， 假 设 现在 有 一 个 宽度 
不 固定 的 元 素 ， 我 们 需要 在 距离 右边 缘 50 像 素 的 位 置 设置 一 个 背景 图 
片 ， 此 时 background 属 性 就 遭遇 寸 类 了 : 由 于 宽度 不 固定 ， 所 以 无 法 
通过 设 定 具 体 数 值 来 实现 我 们 想 要 的 效果 ， 因 为 background 是 相对 左 
上 角 定 位 的 ， 我 们 的 需求 是 右 侧 定 位 。 














要 实现 上 面 的 需求 ， 方 法 挺 多 。 其 中 一 种 方法 就 是 使 用 透明 边框 ， 
如 下 CSS 代 码 : 


.box { 
border-right: 56px solid transparent; 


background-position: 166% 56%; 
} 





此 时 ， 对 58px 的 间距 我 们 使 用 transparent 边 框 表示 ， 这 样 就 可 以 使 
用 百分比 background-position 定 位 到 我 们 想 要 的 位 置 了 。 因 为 ， 默 
认 background 背 景 图 片 是 相对 于 padding box 定 位 的 ， 也 束 是 


说 ，background-position:166% 的 位 置 计 算 默 认 是 不 会 把 border- 
width 计算 在 内 的 。 


2. 优雅 地 增加 点 击 区 域 大 小 








这 是 提高 用 户 体验 的 一 个 小 技巧 ， 尤 其 在 移动 端 ， 我 们 的 操作 工具 
一 般 就 是 我 们 的 手指 ， 但 是 ， 我 们 的 手指 粗细 可 以 媲美 胡萝卜 ， 而 屏 送 
尺寸 就 那么 扣 儿 ， 如 果 我 们 正在 走路 ， 则 一 些 精致 的 图 标 和 按钮 很 容易 
就 点 不 中 甚至 误 点 。 举 个 例子 ， 在 移动 端 搜索 输入 框 输入 内 容 后 ， 右 侧 
会 有 一 个 清除 按钮 ， 类 似 于 图 4-70 所 示 。 





我 是 初始 值 


图 4-70 ”搜索 框 清 除 按钮 








无 论 我 们 是 使 用 CSS 图 标 合并 工具 还 是 手写 模拟 ， 基 本 上 都 是 按照 
图 标的 原始 尺寸 写 的 ， 类 似 下 面 : 





.Icon-clear { 
width: 16px; 


height: 16px; 





} 








效果 虽然 没 问 题 ， 但 是 体验 不 一 定好 ， 因 为 尺寸 仪 仪 16 像 素 ， 我 们 
胡 末 下 般 的 手指 很 容易 点 不 中 ， 甚 至 点 到 后 面 的 输入 框 上 ， 那 就 尴 俯 
了 。 





稳 受 的 方法 是 外 部 再 租 套 一 层 标签 ， 专 门 控制 点 击 区域 大 小 。 如 果 
对 代码 要 求 较 高 ， 则 可 以 使 用 padding 或 者 透明 border 增 加 元 素 的 点 击 
区 域 大 小 。 


其 中 ， 首 推 透明 border 方 法 ， 原 因 很 简单 ， 假 设 我 们 的 图 标 是 使 
用 工具 生成 的 ， 那 么 background-position 就 是 限定 死 的 值 ， 若 再 使 
用 padding 撑 开间 距 ， 就 会 遇 到 定位 不 准 的 问题 。 但 是 ， 若 是 使 用 透 
明 border 增 加 点 击 区 域 ， 则 无 此 问题 ， 只 要 合并 时 留 下 足够 的 间距 就 
可 以 了 。 


.Icon-clear { 
width: 16px; 


height: 16px; 
border: 11ipx solid transparent; 





此 时 ， 点 击 区 域 大 小 从 16x16 一 下 子 提升 到 38x38， 显 然 更 容易 被 点 中 
Ps 


在 现代 浏览 器 下 手动 输入 http://demo.cssworld.cn/4/4-2.php 或 者 扫 下 
面 的 二 维 码 。 现 在 的 点 击 区 域 如 图 4-71 所 示 。 








我 旺 初始 值 | 











图 4-71 ”清除 按钮 点 击 区 域 优雅 增加 

















3. 三 角 等 图 形 绘制 


即使 在 移动 端 ， 使 用 CSS 的 border 属 性 绘制 三 角形 等 图 形 仍 是 性 价 
比 最 高 的 方式 。 例 如 ， 一 个 朝 下 的 等 腰 直 角 三 角形 ， 直 接 用 : 


div { 
width: 8; 


border: 16px solid; 
border-color: #f36 transparent transparent ; 


} 





则 有 图 4-72 所 示 的 效果 。 
Ww 


图 4-72” 朝 下 的 三 角 效 果 
4.4.5 ”border 与 图 形 构建 


border 属 性 可 以 轻松 实现 兼容 性 非常 好 的 三 角 图 形 效 果 ， 为 什么 
可 以 呢 ? 其 底层 原因 受 inset/outset 等 看 上 去 没有 实用 价值 的 
border-sty1le 属 性 影响 ， 边 框 3D 效 果 在 互联 网 早期 其 实 还 是 挺 漳 的 ， 
那个 时 候 人 们 喜欢 有 质感 的 东西 ， 为 了 呈现 逼真 的 3D 效 果 ， 目 然 在 边 
框 转角 的 地 方 一 定 要 等 分 平滑 处 理 ， 然 后 不 同 的 方向 赋予 不 同 的 颜色 。 
然后 ， 这 一 转角 规则 也 被 solid 类 型 的 边框 给 沿用 了 。 因 此 ， 我 们 就 不 
难 理解 下 面 的 4 色 边 框 的 表现 了 : 








div { 
width: 16px;j height: 16px; 


border: 16px solid; 
border-color: #f306 #66f #396 #06f0; 





} 


效果 如 图 4-73 所 示 。 





此 时 ， 如 果 设 置 左 右 下 3 个 方 同 边框 色 为 透明 ， 是 不 是 就 是 一 个 梯 
形 了 ? 


div { 
width: 16px;j height: 16px; 


border: 16px solid; 
border-color: #f30 transparent transparent; 





效果 如 图 4-74 所 示 。 


图 4-73” 实 色 边 框 的 转角 连接 表现 














图 4-74 三 个 方向 边框 透明 下 的 梯形 效果 





此 时 ， 下 进一步， 宽度 从 18px 变 成 9，， 是 不 是 上 面 标 形 下 方 的 开口 
也 就 从 16px 变 成 09 了 ? 是 不 是 三 角形 效果 就 出 现 了 ? 


div { 
width: 6; 


border: 16px solid; 
border-color: #f30 transparent transparent; 





效果 如 图 4-75 所 示 。 
hd 


图 4-75” 朝 下 的 三 角 效 果 


当然 ， 我 们 还 可 以 让 垂直 方向 的 边框 宽度 更 宽 一 点 ， 这 样 三 角形 就 
会 更 加 狭长 : 


div { 
width: 6; 
border-width: 16px 26pX; 


border-style: solid; 
border-color: #f36 transparent transparent; 





效果 如 图 4-76 所 示 。 
又 或 者 是 仅仅 让 两 个 方 同 的 边框 透明 : 


div { 
width: 6; 
border-width: 16px 26pX; 


border-style: solid; 
border-color: #f30 #f36 transparent transparent; 





效果 如 图 4-77 所 示 。 这 种 三 角形 可 以 作为 类 似 于 如 图 4-78 所 示 对 话 框 的 
尖 角 , 


有 


图 4-76 ”更 罕 的 三 角 图 形 


图 4-77 ”一 侧 开口 的 三 角 图 形 效果 














如 果 把 两 个 不 同 倾斜 角度 的 三 角 效 果 有 登 加 ， 则 可 以 实现 更 加 酉 馈 的 
尖 角 效果 ， 如 图 4-79 所 示 。 


相 邻 边框 尖 角 实现 的 气泡 对 话 框 效果 





图 4-78 一 侧 开口 的 三 角 图 形 实际 应 用 





图 4-79 ”三 角色 加 图 形 效 果 


其 至 我 们 可 以 借助 border 生 成 的 梯形 实现 包括 IE8 浏 览 器 在 内 的 小 
圆 角 效果 ， 手 动 输 入 http:/demo.cssworld.cn/4/4-3.php 或 者 扫 右 侧 的 二 维 
码 。 正 8 浏览 器 下 的 效果 如 果 4-80 所 示 。 上 面 的 2 像素 圆 角 实现 原理 如 图 
4-81 所 示 。 





我 是 按钮 


图 4-80 border 实现 圆 角 效果 





“wefore 妆 成 梯形 上 同 外 
a after 生 成 磋 有 形 下 发 角 


图 4-81 ”border 实 现 圆 角 原 理 示 意 

















只 要 是 与 三 角形 或 者 梯形 相关 的 图 形 ， 都 可 以 使 用 border 属 性 来 
模拟 。 





4.4.6 border 等 高 布局 技术 


margin+padding 可 以 实现 等 遍布 局， 同样 ，border 属 性 也 可 以 实 
现 等 高 布局 。 


想 看 效果 ， 手 动 输入 http://demo.cssworld.cn/4/4-4.php 或 者 扫 右 侧 的 
二 维 码 。 点 击 两 个 按钮 ， 随 意 增加 数目 ， 会 发 现 两 栏 的 背景 色 区 域 高 度 
永远 都 是 一 样 的 ， 如 图 4-82 所 示 。 








图 4-82 border 等 高 布局 效果 
核心 CSS 代 人 码 如 下 : 


.box { 
border-left: 156px solid #333; 
background-color: #f6f3f9; 

} 

.box > nav { 
width: 156px; 


margin-left: -156pX; 
float: left; 


} 
.box > section { 
overflow: hidden; 





} 


也 就 是 说 ， 左 侧 深 色 背 景区 域 是 由 border-left 属 性 生成 的 。 元 素 
边框 高 度 总 是 和 元 和 际 目 身高 度 保持 一 致 ， 因 此 可 以 巧妙 地 实现 等 高 布局 
效果 。 

















此 方法 要 想 生 效 ， 有 一 点 需要 注意 ， 父 级 容器 不 能 使 
用 overflow:hidden 清 除 浮动 影响 ， 因为 六 出 隐 甘 是 基于 padding box 
的 ， 0 则 左 浮动 的 导航 列表 元 素 就 会 被 
隐藏 掉 ， 这 显然 不 是 我 们 想 要 的 效果 。 








此 方法 与 用 margin+padding 实 现 的 等 高 布局 相 比 更 加 稳健 ， 不 会 
出 现 销 点 定位 带 来 的 问题 ， 但 同样 它 也 是 有 局 限 性 的 。 





首先 ， 由 于 border 不 支持 百分比 宽度 ， 因 此 ， 适 合 至 少 一 栏 是 
宽 的 布局 。 当 然 ， 如 果 不 考虑 IE8 浏 览 器 ， ae [可 
实现 近似 的 百分比 宽度 效果 。 











其 次 ， 等 高 布局 的 栏目 有 限制 。 因 为 一 个 元 素 的 边框 数目 是 有 限 
的 ， 基 本 上 ，border 等 高 布局 只 能 满足 2 一 3 栏 的 情况 ， 除 非 正 好 是 等 
比例 的 ， 那 还 可 以 使 用 border-style:double 实 现 最 多 7 栏 布局 ， 但 这 
只 是 理论 上 而 已 。 所 以 ， 一旦 等 高 布局 栏目 过 多 ， 则 建议 使 用 table- 
cel1 等 高 布局 或 者 margin 负 值 等 高 布局 。 








最 终 如 何 选 型 ， 还 是 要 看 设计 需求 和 产品 的 兼容 性 要 求 。 








[1] MDN 上 说 ， 要 想 IE8 兼 容 ， 这 里 逗号 后 面 的 空格 要 去 掉 ， 但 是 本 人 
通过 IE11 浏 览 器 的 IE8 模 式 看 ， 无 此 问题 。 本 着 求知 的 精神 ， 我 又 打开 
自己 已 经 落 灰 的 10 年 前 的 笔记 本 ， 使 用 原生 正 8 浏 览 器 测试 了 一 下 ， 结 
果 也 是 没有 问题 ， 因 此 ，MDN 上 的 说 法 可 以 忽略 。 


第 5 革 ”内 联 元 系 与 尝 








块 级 元 系 负 贡 结 构 ， 内 联 元 素 接 浓 内 容 ， 而 CSS 世 界 是 面 丫 图 文 混 
排 ， 也 就 是 内 联 元 系 设 计 的 ， 由 此 可 见 ， 本 章 内 容 在 整个 CSS 世 界 体系 
中 占有 非常 重要 的 位 置 。 





5.1 字母 x 一 CSS 世界 中 隐匿 的 举足轻重 的 角 
色 





我 们 这 里 的 字母 x 就 是 26 个 英文 字母 中 的 x。 由 于 自身 形态 的 一 些 特 
殊 性 ， 这 个 小 小 的 不 起 眼 的 字母 担当 大 任 ， 在 CSS 世 界 中 扮演 了 一 个 重 
要 的 角色 。 

可 能 有 人 的 第 一 反应 是 :“ 我 知道 ， 可 以 模拟 关闭 按钮 的 那个 又 又 
效果 ! ” 

这 位 朋友 思维 很 活跃 ， 但是， 我 们 这 里 说 的 并 不 是 字母 x 在 CSS 志 
界 中 的 奇 技 淫 巧 ， 而 是 正统 的 术语 上 的 紧密 联系 。 

5.1.1 字母 x 与 CSS 世 界 的 基线 


在 各 种 内 联 相 关 模 型 中 ， 凡 是 涉及 垂直 方向 的 排版 或 者 对 齐 的 ， 都 
离 不 开 最 基本 的 基线 (baseline) 。 例 如 ，1line-height 行 高 的 定义 束 
是 两 基线 的 间距 ，vertical-align 的 默认 值 就 是 基线 ， 其 他 中 线 顶 线 
一 类 的 定义 也 离 不 开 基 线 ， 基 线 甚至 衍生 出 了 很 多 其 他 基线 概念 〈 如 图 
5-1I 所 示 ) 。 


_LA -和 国 


2. “字母 ”基线 (英文) b. “悬挂 ”基线 (印度 文 》 c. “表意 ”基线 (中 文 ) 








图 5-1 一 些 基线 示意 


那 大 家 知道 基线 又 是 如 何 定义 的 吗 ? 基线 的 定义 就 离 不 开本 文 的 主 
角 X。 


字母 x 的 下 边缘 〈 线 ) 就 是 我 们 的 基线 。 





对 ， 是 字母 x， 不 是 s 之 类 下 面 有 尾巴 的 字母 ， 参 见 如 图 5-2 所 示 的 
标示 。 


sphiInx - 


图 5-2 ”CSS 中 的 基线 示意 








5.1.2” 字母 x 与 CSS 中 的 x-height 


字母 x 与 CSS 的 故事 远 不 止 基线 这 么 简单 。CSS 中 有 一 个 概念 叫 作 x- 
height， 指 的 是 字母 x 的 高 度 。 





有 人 可 能 会 有 疑问 了 : “一 个 字母 的 高 度 跟 CSS 布 局 排版 有 什么 天 
系 啊 ? ”实际 上 关系 可 大 了 。 


首先 需要 了 解 一 下 x-height 的 含义 。 通 俗 地 讲 ，x-height 指 的 束 
是 小 写字 母 x 的 高 度 ， 术 语 描述 束 是 基线 和 等 分 线 (mean line) (也 称 
作 中 线 ，midline) 之 间 的 距离 。 





维基 上 有 一 个 示意 图 ， 如 图 5-3 所 示 。x-height 的 示意 范围 一 目 了 
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ascent ascender height 







cap height 


mean line median x-height 


descent descender height 


图 5-3 x-height 示 意 
图 5-3 中 还 出 现 了 其 他 的 名 词 ， 这 里 简单 说 一 下 我 的 理解 。 


。 ascender height: 上 下 线 高 度 。 
。 cap height: 大 写字 母 高 度 。 

。 median: 中 线 。 

。 descender height: 下 行 线 高 度 。 


CSS 中 有 些 属性 值 的 定义 就 和 这 个 x-height 有 关 ， 最 典型 的 代表 就 


是 vertical-align:middle。 这 里 的 middle 是 中 间 的 意思 。 注 意 ， 跟 
上 面 的 median〔 中 线 ) 不 是 一 个 意思 。 在 CSS 世 界 中 ，middle 指 的 古 





基线 往 上 1/2 x-height 高 度 。 我 们 可 以 近似 理解 为 字母 x 交叉 点 那个 位 
下 


由 此 可 见 ，vertical-align:middle 并 不 是 绝对 的 垂直 居中 对 
齐 ， 我 们 平常 看 到 的 middle 效 果 只 是 一 种 近似 效果 。 原 因 很 简单 ， 
为 不 同 的 字体 在 行内 盒子 中 的 位 置 是 不 一 样 的 ， 比 如 , “微软 雅 黑 ”就 是 
一 个 字符 下 沉 比 较 明显 的 字体 ， 所 有 字符 的 位 置 都 比 其 他 字体 要 偏 下 一 
点 儿 。 也 就 是 说 ,，“ 微 软 雅 黑 * 字 体 的 字母 x 的 交叉 点 是 在 容器 中 分 线 的 











下 面 一 点 。 此 时 ， 我 们 就 不 难 理 解 为 什么 vertical-align:middle 不 
是 相对 容器 中 分 线 对 齐 的 了 ， 因 为 在 毕竟 CSS 世 界 中 文字 内 容 是 主体 ， 
所 以 ， 对 于 内 联 元 素 垂 直 居 中 应 该 是 对 文字 ， 而 非 居 外 部 的 块 级 容器 所 








ll 


5.1.3 字母 x 与 CSS 中 的 ex 


字母 x 衍 生出 了 x-height 概 念 ， 并 在 这 个 基础 上 深耕 细作 ， 进 一 步 
衍生 出 了 ex。 注 意 ， 这 里 的 ex 是 CSS 中 地 地 道道 的 一 个 尺寸 单位 。 


大 家 可 能 都 听 过 和 用 过 em、px 和 rem， 但 对 连 IE6 都 老 早 支持 的 ex 
单位 却 很 陌生 。 





ex 是 CSS 中 的 一 个 相对 单位 ， 指 的 是 小 写字 母 x 的 高 度 ， 没 错 ， 就 
是 指 x-height。 


那 这 个 单位 有 什么 实际 用 途 呢 ? 存 在 必 有 价值 ! 用 得 少 ， 并 不 表示 


其 没有 作用 ， 只 是 因为 我 们 并 没有 好 好 地 理解 它 、 挖 掘 它 。 我 们 细 细 思 
考 字 母 x 在 CSS 世 界 中 扮演 的 角色 ， 就 会 发 现 ex 的 价值 所 在 。 














注意 ， 虽 然 说 em、px 这 类 单位 的 主要 作用 是 限定 元 素 的 尺寸 ， 但 
是 ， 由 于 字母 x 受 字体 等 CSS 属 性 影响 大 ， 不 稳定 ， 因 此 ex 不 太 适 合 
来 限定 元 素 的 尺寸 。 那 问题 来 了 : ex 连 自己 的 本 职工 作 都 做 不 好 ， 难 道 
还 指望 其 副业 开 挂 ? 














没 错 ，ex 的 价值 束 在 其 昌 
的 垂直 居中 对 齐 效果 。 





受 学 号 影响 的 内 联 元 素 








我 们 都 知道 ， 内 联 元 素 默 认 是 基线 对 齐 的 ， 而 基线 就 是 x 的 底部 ， 
而 1ex 就 是 一 个 x 的 局 度 。 设 想 一 下 ， 假 如 图 标高 度 就 是 lex， 同 时 背景 
图 片 居 中 ， 吕 不 是 图 标 和 文字 天 然 垂直 大 中， 而 且 完 全 不 受 字 体 和 字号 
的 影响 ? 因为 ex 区 是 一 个 相对 于 字体 和 字号 的 单位 。 





文字 表述 比较 苑 日 ， 我 们 来 看 一 个 例子 。 图 5-4 所 示 的 文字 后 面 跟 
着 一 个 小 三 角形 图 标的 效果 是 非常 常见 的 。 现 在 ， 要 让 该 图 标 和 文字 中 
间 位 置 对 齐 ， 你 会 如 何 实现 ? 设 定 好 尺寸 ， 然 后 使 用 vertical- 
align:middle? 这 样 昌 然 也 有 效果 ， 但 是 ， 实 际 上 哆 嗪 了 ， 借 助 ex 单 
位 ， 我 们 直接 利用 默认 的 baseline 基 线 对 齐 就 可 以 实现 这 个 效果 。 


每 页 显示 15 





图 5-4 ”文字 与 小 三 角 图 标 
CSS 代 人 码 如 下 : 


.ijcon-arrow { 
display: inline-block; 
width: 26px; 


height: 1ex; 
background: url(arrow.png) no-repeat center; 


} 





然后 就 对 齐 了 ， 完 全 没有 vertical-align 出 场 的 机 会 。 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/5/1-1.php 或 者 扫 右 侧 的 
二 维 码 。 你 会 发 现 ， 就 算 我 们 把 字体 修改 ， 把 字号 设置 得 很 大 ， 对 齐 依 
然 民 好 ， 如 图 5-5 所 示 。 





zhangxinxu 

















图 5-5 ”使 用 ex 单位 对 齐 不 受 字体 和 字号 影响 





5.2 ”内 联 元 素 的 基石 1ine-height 


本 市 中 ]ine-height 的 内 容 会 涉及 很 多 内 联 盒 模 型 的 知识 ， 因 此 ， 
务必 先 要 掌握 3.4.2 节 关于 内 联 盒 模型 的 知识 。 另 外 ， 下 文中 所 有 的 “ 行 
高 ” 指 的 就 是 line-height。 





5.2.1 内 联 元 素 的 高 度 之 本 一 一 line-height 





先 思 考 下 面 这 个 问题 ， 默认 空 <div> 高 度 是 9， 但 是 一 旦 里 面 写 上 
几 个 文字 ，<div> 高 度 就 有 了 ， 请 问 这 个 高 度 由 何 而 来 ， 或 者 说 是 由 哪 
个 CSS 属 性 决定 的 ? 








如 果 仪 仅 通 过 表象 来 确认 ， 估 计 不 少 人 会 认为 <div> 高 度 是 由 里 面 
的 文字 撑 开 的 ， 也 就 是 font-size 决 定 的 ， 但 本 质 上 是 由 line-height 
属性 全 权 决 定 的 ， 尺 管 某 些 场景 确实 与 font-size 大 小 有 大。 


我 们 不 妨 设 计 一 个 简单 的 例子 来 看 看 真相 完 竟 是 什么 。 例 如 : 


<div class="test1"> 我 的 高 度 是 ? </div> 
.test1 { 
font-size: 16px; 


line-height: 6; 
border: 1px solid #ccc; 
background: #eee; 


} 





和 





<div class="test2"> 我 的 高 度 是 ?</div> 
.test1 { 

font-size: 0; 

line-height: 16px; 


border: 1px solid #ccc; 

background: #eee; 
} 
2 一 个 font -size 字 
号 为 96。 结果 ， 第 一 段 代 码 ， 最 后 元 素 的 高 度 只 剩 下 边框 那么 丁点 儿 ， 
而 后 面 一 段 代 码 ， 虽 然 文 字 小 到 都 看 不 见 了 ， 但 是 16px 的 内 部 高 度 依然 
坚挺 ， 如 图 5-6 所 示 。 














我 的 高 度 是 了 





图 5-6 ”文字 高 度 本 质 上 由 行 高 决定 





很 显然 ， 从 上 面 这 个 例子 可 以 看 出 ， “div> 高 度 是 由 行 高 决定 的 ， 
而 非 文字 。 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/5/2-1.php 或 者 扫 右 侧 的 
二 维 码 。 





可 视 高 度 完全 由 line-height 决 定 。 注 意 这 里 的 措 梧 一 一 “完全 ”， 什 
么 padding、border 属 性 对 可 视 高 度 是 没有 任何 影响 的 ， 这 也 是 我 们 平 
各 口中 的 “ 盒 模型 2 约定俗成 说 的 是 块 级 元 素 的 原因 。 











因此 ， 对 于 文本 这 样 的 纯 内 联 元 素 ，line-height 就 是 高 度 计 算 的 
基石 ， 用 专业 说 法 就 是 指定 了 用 来 计算 行 框 盒子 高 度 的 基础 高 度 。 比 方 
说 ，1Line-height 设 为 16px， 则 一 行文 字 高 度 是 16pXx， 两 行 就 
是 32px， 三 行 就 是 48px， 所 有 浏览 器 泻 染 解 析 都 是 这 个 值 ，1 像 素 都 不 
Ea 





那 如 果 是 蔡 换 元 素 ， 又 或 者 是 块 级 元 素 ，line-height 在 其 中 又 扮 
演 什么 角色 呢 ? 


在 回答 这 个 问题 之 前 ， 我 们 最 好 先 把 line-height 作 用 于 内 联 元 素 
的 细节 给 搞 明 白 。 

通常 ，1line-height 的 高 度 作用 细节 都 是 使 用 “行距 ”和 “ 半 行 距 ” 来 
解释 的 。 那 么 什么 是 “行距 ”， 什 么 又 是 “ 半 行 距 * 呢 ? 





首先 大 家 需要 明确 这 一 点 : 字体 设计 以 及 文字 排版 是 门 很 深入 的 学 
问 ， 英 文 和 中 文 义 有 很 多 不 同 之 处 ， 但 是 ， 我 们 平常 构建 页 面 无 须 如 此 
事 无 巨细 的 知识 。 因 此 ， 这 里 只 简单 介绍 部 分 知识 ， 方 便 大 家 理解 东 些 
行为 和 特性 ， 更 多 内 容 会 在 第 8 草 中 拔 露 。 








我 个 人 是 这 么 认为 的 : 内 联 元 素 的 高 度 由 固定 高 度 和 不 固定 高 度 组 
成 ， 这 个 不 固定 的 部 分 就 是 这 里 的 “行距 ”。 换 句 话说 ，line-height 之 
所 以 起 作用 ， 就 是 通过 改变 “行距 ”来 实现 的 。 





中 国 古 代 四 大 友 明 之 一 的 活字 印刷 术 使 用 的 是 雕刻 好 的 胶泥 字模 ， 
大 家 可 以 回忆 一 下 北京 奥运 会 开幕 式 上 活字 印刷 术 表 演 中 那些 凸 起 的 方 
块 ， 它 使 用 的 字体 是 宋体 ， 注 意 ， 是 宋体 。 然 而 ， 如 果 这 些 方块 部 是 密 
密 胀 麻 无 缝 际 铺 在 一 起 ， 印 出 来 的 文字 束 是 方 方 正 正 的 一 团 ， 那 么 我 们 
会 无 法 一 眼看 出 应 该 横着 读 还 是 竖 厦 仿 。 要 知道 古人 的 排版 是 竖 排 的 ， 
但 我 们 去 看 古人 的 印刷 作品 却 不 会 错误 地 横着 看 ， 为 什么 呢 ?” 因 为 印 出 
来 的 文字 垂直 方向 确实 一 个 接着 一 个 ， 但 是 ， 水 平方 向 ， 列 与 列 之 间 却 
有 着 明显 的 间隙 ， 如 图 5-7 所 示 ， 这 个 间 隐 其 实 就 是 “行距 ”。 














图 5-7 活字 印刷 之 列 间距 


所 以 ,“ 行 距 ? 的 作用 是 可 以 瞬间 明确 我 们 的 阅读 方向 ， 让 我 们 阅读 
文字 更 轻松 。 在 CSS 世 界 中 , “行距 ?其 实 也 是 类 似 的 东西 ， 但 还 是 有 些 
差别 的 。 以 水 平 阅读 流 举例 ， 传 统 印刷 的 “行距 ”是 上 下 两 行文 字 之 间 预 
留 的 间隙， 是 个 独立 的 区 域 ， 也 就 意味 看 第 一 行文 字 的 上 方 是 没有 “ 行 
距 ” 的 ; 但 是 在 CSS 中 ,“ 行 距 ” 分 散在 当前 文字 的 上 方 和 下 方 ， 也 就 是 即 
使 是 第 一 行文 字 ， 其 上 方 也 是 有 “行距 ?的 ， 只 不 过 这 个 “行距 ”的 高 度 仅 
仅 是 完整 “行距 ”高 度 的 一 半 ， 因 此 ， 也 被 称 为 “ 半 行 距 ”。 


























人 总 是 先入 为 主 ， 尤 其 是 前 问 人 员 ， 排 版 知识 的 获取 基本 上 都 是 从 
CSS 实 际 工作 中 来 ， 束 会 很 自然 地 认为 “间距 就 是 应 该 上 下 等 分 啊 ”， 实 
际 上 太 天 真 了 ， 且 先 不 说 传统 印刷 的 “行距 ?在 中 间 ， 著 名 的 排版 软件 
Adobe InDesign 的 “行距 ”就 是 加 在 文字 上 方 的 ， 所 以 没有 什么 理 所 当 











WW O 


现在 知道 了 CSS 的 “ 半 行 距 ?， 那 么 哪里 到 哪里 才 是 “ 半 行 距 ” 的 高 度 
范围 呢 ? 一 般 业 界 的 共识 是 : 行距 = 行 高 -em-box。 转 换 成 CSS 语 言 就 
是 : 行距 = line-height - font-size。 其 中 em-box 是 CSS 世 界 中 比 
较 虚 的 一 个 概念 ， 说 “ 虚 ” 并 不 是 胡 编 乱 造 的 意思 ， 而 是 我 们 无 法 有 效 感 
知 这 个 盒子 具体 的 位 置 在 哪里 ， 但 是 有 一 点 可 以 明确 ， 束 是 其 高 度 正好 
就 是 lem。em 是 一 个 相对 font-size 大 小 的 CSS 单 位 ， 因 此 1em 等 用 于 当 
前 一 个 font-size 大 小 ， 这 束 是 “行距 = line-height - font- 
size” 这 个 公式 的 由 来 。 有 了 “行距 ”"， 我 们 一 分 为 二 ， 就 有 了 “ 半 行 
距 ”， 分 别 加 在 em-box 上 面 和 下 面 就 构成 了 文字 的 完整 高 上 度 了 。 话 虽 这 
么 讲 ， 但 一 旦 不 弄 清楚 em-box 究 竞 在 什么 位 置 ， 我 们 就 无 法 在 脑 中 形成 
关于 行 高 的 具象 认 知 ， 知 识 很 容易 遗忘 。 























人 很 容易 被 肉眼 所 见 的 东西 迷惑 ， 因 此 ， 很 多 人 会 把 文字 图 形 区 域 
看 成 是 em-box 范 围 ， 实 际 上 这 是 不 正确 的 ， 比 方 说 ， 一 些 带 尾 巴 的 英文 
字符 q 或 者 g， 其 小 尾巴 是 在 em-box 范 围 之 外 的 ， 而 对 于 汉字 ， 很 多 字体 
图 形 高 度 实际 上 要 小 于 em-box 高 度 的 。 


此 时 ， 就 轮 到 内 容 区 域 (content area) 出 马 了 。 在 本 书 中 ， 内 容 区 
域 可 以 近似 理解 为 Firefox/ 正 浏览 器 下 文本 选中 带 背 景色 的 区 域 。 这 人 么 理 
解 的 重要 原因 之 一 就 是 可 见 ， 这 对 于 我 们 深入 理解 内 联 元 素 知 识 非 常 有 


帮助 。 


大 多 数 场景 下 ， 内 容 区 域 和 em-box 是 不 一 样 的 ， 内 容 区 域 高 度 受 
font-family 和 font-size 双 重 影响 ， 而 em-box 仅 受 font-size 影 响 ， 
通 音 内容 区 域 高 度 要 更 高 一 些 。 除 了 下 面 这 种 情况 ， 也 就 是 “ 当 我 们 的 
字体 是 宋体 的 时 候 ， 内 容 区 域 和 em-box 是 等 同 的 ”， 因 为 宋体 是 一 种 正 
统 的 印刷 字体 ， 方 方正 正 ， 所 以 千 万 不 要 小 看 宋体 。 


于 是 ， 利 用 我 们 平常 不 待 见 的 宋体 ， 束 能 准确 揪 出 “ 半 行 距 ” 的 藏 喘 
之 所 了 ， 测 试 代码 如 下 : 


.test { 
font-family: simsun; 
font-size: 24px; 
line-height: 36px; 
background-color: yellow; 


} 
.test > span { 
background-color: white; 


<div class="test"> 
<span>sphinx</span> 
</div> 





此 时 ， 乎 第 虚无 的 em-box 借 助 内 容 区 域 (图 5-8 中 字符 sp 的 选中 区 域 ) 
骏 露 出 了 庐山 真面目 ,“ 半 行距 ?也 准确 显现 出 来 了 ， 如 图 5-8 右 侧 标 
人 











1Ine-helght:120px 


torn-size:B0px 





图 5-8 半 行 间距 
眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/5/2-2.php。 


学 习 基 础 理论 知识 的 好 处 之 一 就 是 可 以 更 准确 地 进行 技术 实践 ， 比 
方 说 这 里 ， 我 们 知道 “ 半 行 距 ” 的 位 置 和 范围 ， 束 可 以 更 准确 地 帮助 我 们 
还 原 设 计 。 


可 能 是 由 于 CSS 开 发 人 员 不 够 专注 细致 ， 外 加 规范 设计 本 里 的 原 
因 ， 设 计 师 往往 会 对 各 个 元 素 间 的 距离 间 隐 标注 得 很 清晰 。 但 是 ， 设 计 
师 并 不 是 开发 人 员 ， 他 们 并 没有 把 网 页 中 无 处 不 在 行 间距 考虑 在 内 ， 上 所 
有 与 文字 相关 的 间距 都 是 从 文字 的 上 边缘 和 下 边缘 开始 标注 的 。 除 非 我 
们 全 局 行 高 设置 为 line-height:1， 和 否则 这 些 标注 的 距离 和 我 们 使 用 的 
margin 间 距 都 是 不 一 致 的 。 








但 是 ， 如 果 我 们 理解 了 半 行 距 ， 结 合 我 们 网 页 中 的 设置 的 line- 
height 大 小 ， 就 能 根据 标注 获取 准确 的 间距 值 。 举 个 例子 ， 假 设 line- 
height 是 1.5，font-size 大 小 是 14px， 那 么 我 们 的 半 行 距 大 小 就 是 
(套用 上 面 的 行距 公式 再 除 以 2) : (14px * 1.5 - 14px) / 2 = 
14px * 6.25 = 3.5px。border 以 及 line-height 等 传统 CSS 属 性 并 





没有 小 数 像素 的 概念 (从 CSS3 动 画 的 细腻 程度 可 以 看 出 )， 因 此 ， 这 
里 的 3.5px 需 要 取 整 处 理 ， 如 果 标 注 的 是 文字 上 边 距 ， 则 向 下 取 整 ， 如 
果 是 文字 下 边 距 ， 则 同上 取 整 ， 因 为 绝 大 多 数 的 字体 在 内 容 区 域 中 都 是 
偏 下 的 。 所 以 ， 假 设 设计 师 标注 了 文字 字形 上 边缘 到 图 片 下 边缘 间距 
26px， 则 我 们 实际 的 margin-top 值 应 该 是 17px， 因 为 3.5px 辣 下 取 整 


是 3px。 


下 面 回 到 最 初 的 问题 ，1ine-height 如 何 通过 改变 行距 实现 文字 排 
版 ? 当 line-height 设 为 2 的 时 候 ， 半 行距 是 一 半 的 文字 大 小 ， 两 行文 
字 中 间 的 间隙 差不多 一 个 文字 尺寸 大 小 ; 如 果 1ine-height 大 小 是 1 售 
文字 大 小 ， 则 根据 计算 ， 半 行距 是 68， 也 就 是 两 行文 字 会 紧密 依 假 在 一 
起 ; 如 果 line-height 值 是 8.5， 则 此 时 的 行距 就 是 负 值 ， 虽 然 ]ine- 
height 不 文 持 负 值 ， 但 是 行距 可 以 为 负 值 ， 此 时 ， 两 行文 字 就 是 重 登 
纠缠 在 一 起 。 具 体 表现 如 图 5-9 所 示 。 图 5-9 有 对 应 的 实例 页 面 ， 有 兴趣 
的 话 可 以 手动 输入 http://demo.cssworld.cn/5/2-3.php 或 者 扫 下 面 的 二 维 
人 码 。 





图 5-9 1line-height 通 过 控制 行距 实现 文字 排版 








说 完了 内 联 元 素 ， 下 面 轮 到 答 换 元 系 和 块 级 元 素 了 。 





关于 替换 元 素 的 高 度 与 1ine-height 的 关系 首先 需要 和 弄 明 白 这 个 问 
题 : Line-height 可 以 影响 蔡 换 元 素 〈 如 图 片 的 高 度 ) 吗 ? 答案 是 ， 
可 以 ! 





可 能 有 人 会 反 驶 了 ， 不 会 呀 ， 你 看 下 面 这 个 例子 : 


.box { 
line-height: 256px; 


<div class="box"> 
<img src="1.jpg" height="128"> 
</div> 





<div> 元 素 中 ， 束 一 张 图 片 ， 其 他 什么 都 没有 ， 但 此 时 .box 元 素 高 度 却 
是 256px， 难 道 不 是 line-height 把 图 片 占据 的 高 度 变 高 了 吗 ? 





不 是 的 ， 不 是 line-height 把 图 片 占据 高 上 度 变 高 了 ， 而 是 把 “幽灵 
空白 节点 ”的 高 度 变 高 了 。 图 片 为 内 联 元 素 ， 会 构成 一 个 “ 行 框 盒子 ”， 
而 在 HIML5 文 档 模 式 下 ， 每 一 了 1 oe a 
的 “幽灵 空白 节点 ”， 其 内 联 特 性 表现 和 普通 字符 一 模 一 样 ， 所 以 ， 

的 容器 高 度 会 等 于 line-height 设 置 的 属性 值 256px。 








实际 开发 的 时 候 ， 图 文 和 文字 混在 一 起 是 很 常见 的 ， 那 这 种 内 联 著 





换 元 素 和 内 联 非 答 换 元 际 在 一 起 时 的 高 度 表 现 又 是 怎样 的 呢 ? 


由 于 同属 内 联 元 素 ， 因 此 ， 会 共同 形成 一 个 “ 行 框 盒子 ”，1ine- 
height 在 这 个 混合 元 素 的 “ 行 框 盒子 "中 扮演 的 角色 是 决定 这 个 行 盒 的 最 
小 高 度 ， 听 上 去 似乎 有 点 儿 和 塌 凑 ， 对 于 纯 文 本 元 素 ，1ine-height 非 常 
威风 ， 直 接 决 定 了 最 终 的 高 度 。 但 是 ， 如 果 同 时 有 蔡 换 元 素 ， 则 line- 
height 的 表现 一 下 子 弱 了 很 多 ， 只 能 决定 最 小 高 度 ， 对 最 终 的 高 度 表 
现 有 望尘莫及 之 感 。 为 什么 会 这 样 呢 ? 一 是 蔡 换 元 素 的 高 上 度 不 受 line- 
height 影 响 ， 二 是 vertical-align 属 性 在 背后 作 尝 。 














对 于 这 种 混合 蔡 换 元 素 的 场景 ，1ine-height 要 想 一 统 江山 ， 需 要 
值 足 够 大 才 行 。 但 是 ， 实 际 开 发 的 时 候 ， 我 们 给 Line-height 设 置 的 值 
总 是 很 中 规 中 算 ， 于 是 ， 就 会 出 现 类 似 下 面 的 场景 : 明明 文字 设置 了 
line-height 为 28px， 但是， 如 果 文 字 后 面 有 小 图 标 ， 最 后 “ 行 框 盒 
子 ” 高 度 却 是 21px 或 是 22px。 这 种 现象 背后 最 大 的 黑手 其 实 
是 vertical-align 属 性 ， 我 们 会 在 下 一 章 好 好 深入 剖析 为 什么 会 有 这 
样 的 表现 。 





























对 于 块 级 元 素 ，1line-height 对 其 本 身 是 没有 任何 作用 的 ， 我 们 平 
时 改变 line-height， 块 级 元 素 的 高 度 跟 着 变化 实际 上 是 通过 改变 块 级 
元 素 里 面 内 联 级 别 元 素 占据 的 高 度 实现 的 。 











比方 说 ， 一 个 <p> 元 素 中 有 10 行 图 文 内 容 ， 则 这 个 <p> 元 素 的 高 度 
就 是 由 这 10 行 内 容 产 生 的 10 个 “ 行 框 盒子 ”高度 累 加 而 成 ; 一 
<article> 元 素 中 可 能 会 有 20 个 <p> 元 素 ， 则 这 个 <article> 元 素 又 是 
由 这 20 个 块 级 xp> 元 素 高 度 办 加 而 成 ， 同 时 块 级 元 素 还 可 以 通过 height 





和 min-height 以 及 盒 模型 中 的 margin、padding 和 border 等 属性 改变 
占据 的 高 度 ， 所 有 这 一 切 束 构成 了 CSS 世 界 完整 的 高 度 体 系 。 


因为 line-height 几 乎 无 处 不 在 的 继承 特性 ， 并 且 CSS 世 界 是 为 了 
更 好 地 图 文 展 示 ， 所 以 line-height 不 仅 是 内 联 元 素 高 度 的 基石 ， 而 且 
还 是 整个 CSS 世 界 高 度 体系 的 基石 。 





5.2.2 ”为 什么 line-height 可 以 让 内 联 元 素 “ 垂 直 居 中 ” 
坊间 流传 着 这 人 么 一 种 说 法 : “要 想 让 单行 文字 垂直 居中 ， 只 要 设 
置 ]line-height 大 小 和 height 高 度 一 样 就 可 以 了 。” 类 似 下 面 这 样 的 代 

但 : 





.title { 
height: 24px; 


line-height: 24px; 





} 


从 效果 上 看 ， 似 乎 验证 了 这 种 说 法 的 正确 性 。 但 是 ， 实 际 上 ， 上 面 的 说 
法 对 CSS 初 学 者 会 产生 两 个 严重 的 误导 ， 同 时 ， 语 句 本 身 也 存在 不 严谨 
的 地 方 ! 

误区 之 一 : 要 让 单行 文字 垂直 居中 ， 只 需要 1ine-height 这 一 个 属 
性 就 可 以 ， 与 height 一 点 儿 关 系 都 没有 。 也 就 是 说 ， 我 们 直接 : 
.title { 


line-height: 24px; 
} 


就 可 以 了 。 坊 间 传 图 的 说 法 会 误导 大 小 一 定 要 同时 设置 height 属 性 才 
可 以 。 











误区 二 : 行 高 控制 文字 垂直 居中 ， 不 仅 适 用 于 单行 ， 多 行 也 是 可 以 
的 。 准 确 的 说 法 应 该 是 "1ine-height 可 以 让 单行 或 多 行 元素 近 似 垂直 
居中 ”。 稍 等 ， 这 里 有 个 词 似乎 和 上 面 的 表述 有 点 儿 微 妙 的 差异 , “近似 
垂直 居中 ”? 没 错 ， 一 定 要 加 上 “近似 ”二 字 ， 这 样 的 说 法 才 足 够 严谨 。 
换 名 话说， 我 们 通过 line-height 设 置 的 垂直 居中 ， 并 不 是 真正 意义 上 
的 垂直 居中 ! 究竟 是 怎么 一 回 事 ? 














这 里 ， 其 实 要 解答 的 是 两 个 问题 ， 一 个 是 为 何 可 以 “ 重 家 居中 *， 另 
一 个 是 为 何 是 “近似 *。 








正如 上 一 节 所 说 的 ， 没 有 什么 理所当然 ， 行 高 可 以 实现 “垂直 居 
中 ”原因 在 于 CSS 中 “行距 的 上 下 等 分 机 制 ”， 如 果 行 距 的 添加 规则 是 在 文 
字 的 上 方 或 者 下 方 ， 则 行 高 是 无 法 让 文字 垂直 居中 的 。 








说 “近似 ”是 因为 文字 字形 的 垂直 中 线 位 置 普 过 要 比 真 正 的 “ 行 框 盒 
子 ” 的 垂直 中 线 位 置 低 ， 璧 如 我 们 拿 现 在 用 得 比较 多 的 微软 雅 黑 字体 举 
例 : 





font-size: 80px; 
line-height: 128px; 
background-color: #666; 
font-family: "microsoft yahei'; 
color: #fff; 

} 














<p> 微 软 雅 黑 </p> 





结果 ， 我 都 不 需要 标注 ， 肉 眼 残 能 看 出 字形 明显 偏 下 ， 如 图 5-10 所 示 。 





图 5-10 line-height 与 位 置 下 沉 的 微软 雅 黑 字 体 


由 于 我 们 平时 使 用 的 font-size 都 比较 小 ，12px 一 16px 很 多 ， 
此 ， 虽 然 微 软 雅 黑 字 体 有 下 沉 ， 但 也 就 1 像素 的 样子 ， 所 以 我 们 往往 觉 
察 不 到 这 种 “垂直 对 齐 ” 其 实 并 不 是 真正 意义 上 的 垂直 居中 ， 只 是 感官 上 

















看 上 去 像 是 垂直 居中 罢了 。 这 也 是 我 总 是 称 1ine-height 实 现 的 单行 文 
本 垂直 居中 为 “近似 生 直 居中 ”的 原因 。 








下 面 再 来 说 说 行 高 实现 多 行文 本 或 者 图 片 等 蔡 换 元 和 聚 的 垂直 居中 效 


果实 现 。 


多 行文 本 或 者 蔡 换 元 素 的 垂直 居中 实现 原理 和 单行 文本 就 不 一 样 


了 ， 


以 ， 示 例 代 码 如 下 : 


.box { 
line-height: 126px; 
background-color: #f06f3f9; 
} 


.Content { 
display: inline-block; 


line-height: 26px; 

margin: 6 206px; 

vertical-align: middle; 
} 
<div class="box"> 

<div class="content"> 基 于 行 高 实现 的 
</div> 





需要 line-height 属 性 的 好 朋友 vertical-align 属 性 帮助 才 可 


...</div> 








效果 如 图 5-11 所 示 。 有 眼见 为 实 ， 手 动 输入 
http://demo.cssworld.cn/5/2-4.php 或 者 扫 下 面 的 二 维 码 。 





基于 行 高 实现 的 多 行文 字 琶 直 忆 中 效 
时 ， 需 要 vertical- -align 属 性 帮助 


t 





图 5-11 line-height 与 多 行文 字 垂 直 居 中 效果 





实现 的 原理 大 致 如 下 。 


(1) 多 行文 字 使 用 一 个 标签 包 衷 ， 然 后 设置 display 为 inline- 
block。 好 处 在 于 既 能 重 置 外 部 的 line-height 为 正常 的 大 小 ， 又 能 保 
持 内 联 元 素 特 性 ， 从 而 可 以 设置 vertical-align 属 性 ， 0 
非常 关键 的 “ 行 框 盒子 *"。 我 们 需要 的 其 实 并 不 是 这 个 “ 行 框 盒子 ”， 
每 个 “ 行 框 盒子 ”都 会 附 禹 的 一 个 产物 一 一 “幽灵 空白 节点 ”， 上 三 
为 8、 表现 如 同 普 通 字 符 的 看 不 见 的 “节点 ”"。 有 了 这 个 “幽灵 空白 节 
点 ”， 我 们 的 line- height:126px 就 有 了 作用 的 对 象 ， 从 而 相当 于 














在 .content 元 素 前 面 撑 起 了 一 个 高 度 为 126px 的 宽度 为 6 的 内 联 元 素 。 


(2) 因为 内 联 元 素 默认 都 是 基线 对 齐 的 ， 所 以 我 们 通过 
对 .content 元 素 设 置 vertical- align:middle 来 调整 多 行文 本 的 重 
直 位 置 ， 从 而 实现 我 们 想 要 的 “垂直 居中 ”效果 。 如 果 是 要 借助 Tine- 
height 实 现 图 片 垂直 居中 效果 ， 也 是 类 似 的 原理 和 做 法 。 





细心 的 读者 可 能 发 现 ， 上 面 我 解释 原理 的 时 候 , “垂直 居中 ”这 4 个 
字 加 了 引号 ， 英 非 ， 这 里 的 “垂直 居中 ”又 是 “近似 ”? 








你 还 真 说 对 了 ， 这 里 实现 的 “垂直 居中 ”确实 也 不 是 真正 意义 上 的 重 
直 居 中 ， 也 是 “近似 垂直 居中 ”。 还 是 上 面 的 多 行文 本 垂直 居中 的 例子 ， 
如 果 我 们 捕获 到 多 行文 本 元 素 的 尺寸 空间 ， 截 个 图 ， 然 后 通过 尺子 工具 
一 量 就 会 发 现 ， 上 面 的 留 空 是 41px， 下 面 的 留 空 是 39px， 对 啦 ， 原 来 
不 是 完全 的 垂直 居中 ， 如 图 5-12 所 示 。 

















图 5-12 ”上 下 留 白 大 小 是 不 一 样 的 








不 垂直 居中 与 1ine-height 无 关 ， 而 是 vertical- align 导 致 
的 ， 具 体 原因 我 们 将 在 5.3 市 讲解 。 


5.2.3 深入 Line-height 的 各 类 属性 值 


line-height 的 默认 值 是 normal， 还 支持 数值 、 百 分 比值 以 及 长 


度 值 。 


首先 了 解 一 下 这 个 看 上 去 一 般 实际 上 不 一 般 的 normal。 为 什么 说 
line-height 的 默认 值 normal 不 一 般 呢 ? 因为 ， 本 质 上 ， 这 个 normal 
实际 上 是 一 个 变量 。 我 想 ， 很 多 人 脑 中 的 想法 应 该 是 这 样 的 : normal 
应 该 对 应 一 个 具体 的 行 高 值 ， 按 照 经 验 差 不 多 1 倍 多 一 点 儿 的 样子 ， 具 
体 值 多 少 需要 测试 一 下 才 知 道 。 实 际 上 非 也 ! normal 实 际 上 是 一 个 和 
font-family 有 着 密切 关联 的 变量 值 。 什 么 意思 呢 ?” 比 方 说 ， 一 个 
<div> 元 素 ， 有 两 段 对 比 CSS 如 下 : 








div { 
line-height: normal; 
font-family: 'microsoft yahei'; 


} 


div { 
line-height: normal; 
font-family: simsun; 


} 





此 时 两 段 CSS 中 1ine-height 的 属性 值 normal 的 计算 值 是 不 一 样 的 ， 表 
5-1 给 出 的 是 我 在 几 个 昌 面 浏览 器 的 测试 数据 。 





表 5-1 不 同 字体 下 的 line-height:normal 解 析 值 








可 以 看 到 ， 只 要 字体 确定 ， 各 个 浏览 器 下 的 默认 line-height 解 析 
值 基 本 上 都 是 一 样 的 。 然 而 ， 关 键 问题 是 ， 不 同 的 浏览 器 所 使 用 的 默认 
中 英文 字体 并 不 是 一 样 的 ， 并 且 不 同 操作 系统 的 默认 字体 也 不 一 样 ， 换 
名 话说， 就 是 不 同系 统 不 同 浏览 器 的 默认 Line-height 都 是 有 差异 的 。 
因此 ， 在 实际 开发 的 时 候 ， 对 line-height 的 默认 值 进行 重 置 是 势 在 必 
行 的 。 下 面 问题 来 了 ，1line-height 应 该 重 置 为 多 大 的 值 呢 ? 是 使 用 数 
值 、 百 分 比值 还 是 长 度 值 呢 ? 

















要 回答 这 个 问题 ， 我 们 需要 先 对 这 几 种 属性 值 有 一 定 的 了 解 才 行 


数值 ， 如 line-height:1.5， 其 最 终 的 计算 值 是 和 当前 font-size 
相 乘 后 的 值 。 例 如 ， 假 设 我 们 此 时 的 font-size 大 小 为 14px， 

则 line-height 计 算 值 是 1.5*14px=21px。 

百分比 值 ， 如 1ine-height:156%， 其 最 终 的 计算 值 是 和 当 

六 font-size 相 乘 后 的 值 。 例 如 ， 假 设 我 们 此 时 的 font-size 大 小 
为 14px， 则 1ine-height 计 算 值 是 1568%*14pXx=21pXx。 

长 度 值 ， 也 就 是 带 单 位 的 值 ， 如 Line-height:21px 或 者 1ine- 
height:1.5em 等 ， 此 处 em 是 一 个 相对 于 font-size 的 相对 单位 ， 
因此 ，1Line-height:1.5em 最 终 的 计算 值 也 是 和 当前 font-size 
相 乘 后 的 值 。 例 如 ， 假 设 我 们 此 时 的 font-size 大 小 为 14pxX， 

则 line-height 计 算 值 是 1.5*14px=21px。 


乍 一 看 ， 似 乎 line-height:1.5、line-height:156% 和 和 1]ine- 
height:1.5em 这 3 种 用 法 是 一 模 一 样 的 ， 最 终 的 行 高 大 小 都 是 和 font- 
size 计 算 值 ， 但 是 ， 实 际 上 ，1ine-height:1.5 和 另外 两 个 有 一 点 儿 
不 同 ， 那 就 是 继承 细节 有 所 差别 。 如 果 使 用 数值 作为 line-height 的 属 


性 值 ， 那 么 所 有 的 子 元 素 继承 的 都 是 这 个 值 ; 但 是 ， 如 果 使 用 百分比 值 
或 者 长 度 值 作为 属性 值 ， 那 么 所 有 的 子 元 素 继 承 的 是 最 终 的 计算 值 。 什 
么 意思 呢 ? 比方 说 下 面 3 段 CSS 代 码 : 





body { 
font-size: 14px; 
line-height: 1.5; 


} 


body { 
font-size: 14px; 
line-height: 156%; 
} 


body { 
font-size: 14px; 
line-height: 1.5em; 





} 


对 于 <body> 元 素 而 言 ， 上 面 3 段 CSS 最 终 的 行 高 计算 值 是 21px 是 没有 任 
何 区 别 的 ， 但 是 ， 如 果 同 时 还 有 子 元 素 ， 例 如 ; 





h3, p { margin: 6; } 
h3 { font-size: 32px; } 


p { font-size: 26px; } 
<h3> 标 题 </h3> 
<p> 内 容 </p> 





结果 1line-height:1586% 和 1ine-height:1.5em 的 最 终 表 现 是 “标题 * 文 
字 和 "内 容 ” 文 字 重 登 在 了 一 起 ， 如 图 5-13 所 示 。 








俗话 讲 “ 没 有 对 比 就 没有 伤害 *， 我 们 来 看 看 1ine-height:1.5 的 最 
终 表 现 ， 排 版 令 人 舒畅 ， 如 图 5-14 所 示 。 


Wi 
博时 





图 5-13 ”文字 重 登 





标题 
内 容 
图 5-14 ”文字 正常 排版 
眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/5/2-5.php 或 者 扫 右 侧 的 
二 维 人 码 。 





line-height:156% 和 1ine-height:1.5em 代 码 下 的 文字 重 且 的 原 
因 在 于 <h3> 和 <p> 元 素 继承 的 并 不 是 156% 或 者 1.5em， 而 是 <body > 元素 
的 line-height 计 算 值 21px， 也 束 是 说 ，<h3> 和 <p> 元 素 的 行 蜗 都 
是 21px， 考 处 到 <h3> 的 font-size 大 小 为 32px， 此 时 <h3> 的 半 行 间距 
就 是 -5.5px， 因 而 “标题 ”文字 和 下 面 的 内容” 文字 发 生 重 登 。 


但 是 line-height:1.5 的 继承 则 不 同 ，<h3> 和 <p> 元 素 的 line- 
height 继 承 的 不 是 计算 值 ， 而 是 属性 值 1.5， 因 此 ， 对 于 <h3> 元 素 ， 此 
时 的 行 高 计算 值 是 1.5*32px=48px，<p> 元 素 的 行 高 计算 值 


是 1.5*28px=38px， 于 是 ， 间 距 合 理 ， 排 版 舒适 。 


实际 上 ，1lLine-height:156%、1ine-height:1.5em 要 想 有 类 
似 line-height:1.5 的 继承 效果 ， 也 是 可 以 实现 的 ， 类 似 下 面 的 CSS 代 
但 : 
* { 


line-height: 156%; 
} 








就 是 使 用 通配符 * 匹 配 所 有 的 元 素 。 有 人 可 能 会 疑问 : 既然 Line- 
height 数 值 可 以 让 元 素 天 然 继承 相对 计算 特性 ， 那 这 里 的 通配符 岂 不 


完全 没 必要 ? 





其 实 非 也 ， 两 者 还 是 有 差别 的 。HTML 中 的 很 多 替换 元 素 ， 尤 其 表 
单 类 的 蔡 换 元 素 ， 如 输入 框 、 按 钮 之 类 的 ， 很 多 具有 继承 特性 的 CSS 属 
性 其 自己 也 有 一 套 ， 如 font-family、font-size 以 及 这 里 的 line- 
height。 由 于 继承 是 属于 最 弱 的 权重 ， 因 此 body 中 设置 的 line- 
height 是 无 法 影响 到 这 些 蔡 换 元 条 的， 但 是 作为 一 个 选择 器 ， 束 不 一 
样 了 ， 会 直接 重 置 这 些 蔡 换 元 素 默认 的 line-height， 这 其 实 是 我 们 需 
要 的 ， 因 此 从 道义 上 讲 ， 使 用 通 配 也 是 合理 的 。 但 又 考虑 到 * 的 性 能 以 
及 明明 有 继承 却 不 好 好 利用 的 羞耻 感 ， 我 们 可 以 折 中 使 用 下 面 的 方法 : 








body { 
line-height: 1.5; 
} 


input，button { 
line-height: inherit; 


} 





说 这 么 多 其 实 还 是 为 了 解决 一 开始 的 问题 ，1ine-height 应 该 重 置 





为 多 大 的 值 呢 ? 是 使 用 数值 、 百 分 比值 还 是 长 度 值 呢 ? 


下 面 是 我 的 答案 : 如果 我 们 做 的 是 一 个 重 图 文 内 容 展示 的 网 页 或 者 
网 站 ， 如 博客 、 论 坛 、 公 众 号 之 类 的 ， 那 一 定 要 使 用 数值 作为 单位 ， 考 
虑 到 文章 阅读 的 舒适 度 ，Line-height 值 可 以 设置 在 1.6 一 1.8。 如 果 是 
一 个 偏重 布局 结构 精致 的 网 站 ， 则 在 我 看 来 使 用 长 度 值 或 者 数值 都 是 可 
以 的 ， 因 为 ， 第 一 ， 我 们 的 目的 是 为 了 兼容 ; 第 二 ， 无 论 使 用 哪 种 类 型 
值 ， 都 存在 需要 局 部 重 置 的 场景 。 不 过 ， 根 据 我 的 统计 ， 基 本 上 各 大 站 
点 都 是 使 用 数值 作为 全 局 的 line-height 值 。 不 过 ， 这 并 不 表示 使 用 数 
值 就 一 定 是 最 好 的 ， 如 果 网 站 内 容 的 样式 不 是 动态 不 可 控 的 ， 有 时候 ， 
固定 的 长 度 值 反 而 更 利于 精确 布局 。 因 此 ， 不 要 盲目 跟风 。 那 具体 设置 
的 值 应 该 是 多 大 呢 ? 























如 果 使 用 的 是 长 度 值 ， 我 建议 直接 1ine-height:26px， 排 版 时 候 
计算 很 方便 。 


如 果 随 大 流 使 用 的 是 数值 ， 我 建议 最 好 使 用 方便 计算 的 行 高 值 ， 一 
种 是 line-height 属 性 值 本 身 方便 计算 ， 另 一 种 是 1ine-height 的 默认 
计算 值 方便 计算 。 比 方 说 ，1.3、1.4、1.5 都 有 大 型 网 站 使 用 ， 我 们 就 不 
妨 使 用 1.5， 因 为 心算 1.4*16px 要 比 1.5*16px 难 多 了 ， 这 就 是 第 一 
种 “属性 值 本 里 方便 计算 ” 而 另外 一 种 “默认 计算 值 方便 计算 ?是 我 们 先 
得 到 方便 计算 的 line-height 计 算 值 ， 然 后 倒 推 1ine-height 应 该 使 用 
的 数值 是 多 大 ， 例 如 26px 有 是 一 个 非常 方便 的 计算 值 ， 如 果 <body> 默 认 
重 置 的 font-size 是 14px， 则 line-height 数 值 应 该 是 
26px/14px=1.4285714285714286 四 售 五 入 的 结果 ， 于 是 得 到 : 


body { 


line-height: 1.42857 
font-size: 14px; 


} 








不 好 意思 ， 给 大 家 下 套子 了 。 注 意 ， 在 CSS 中 ， 计 算 行 高 的 时 候 ， 
行 高 值 一 定 不 要 向 下 舍 入 ， 而 要 向 上 舍 入 。 上 面 虽然 14*1.42857 计 算 
机 近乎 是 28px， 但 在 Chrome 浏 览 嚣 下， 依然 以 19px 的 高 度 呈 现 ， 如 果 
我 们 同上 含 入 取 1.42858， 则 最 终 所 有 浏览 器 行 高 计算 值 是 20pX， 代 码 
示意 如 下 : 





body { 
line-height: 1.42858; 


font-size: 14px; 





} 
5.2.4 ”内 联 元 素 line-height 的 “大 值 特性 ” 


理解 了 下 面 这 个 案例 ， 就 真正 理解 了 内 联 元 素 l]ine-height。 
此 ， 放 在 最 后 算是 对 line-height 的 总 结 和 知识 测验 吧 。 此 例子 HTML 
都 是 一 样 的 : 


<div class="box"> 


<span> 内 容 ...</span> 
</divy> 





CSS 代 码 有 所 不 同 ， 分 别 为 


.box { 
line-height: 96px; 
} 


.box span { 
line-height: 26pX; 
} 





和 


.box { 
line-height: 26pX; 


} 

.box span { 
line-height: 96px; 

} 








也 就 是 一 个 子 元 素 行 局 是 28px， 一 个 是 96px， 假 如 文字 就 1 行 ，.box 元 


素 的 高 度 分 别 是 多 少 ? 


按照 我 们 以 前 考试 做 选择 题 的 套路 ， 非 A 即 B: 按照 经 验 ， 子 元 素 
行 高 履 善 父 元 素 ， 应 该 高 度 等 于 <span> 元 陛 的 高 度 ， 分 别 
是 28px、96px; 但 由 于 基本 功 不够 扎实 ， 并 不 确定 内 联 元 素 是 否 
持 line-height， 如 果 不 文 持 ， 那 应 该 跟 痢 .box 元 素 的 行 高 走 ， 高 度 
应 该 是 96px、28px。 总 之 ， 肯 定 束 这 两 个 答案 之 间 ! 











好 ， 如 果 大 家 也 有 和 上 面 类 似 的 想法 ， 那 么 建议 还 要 再 细 细 读 一 读 
前 面 的 内 容 。 正 确 的 答案 是 : 全 部 是 96px 局 ! 


还 不 信 ? 可 以 看 一 下 演示 示例 ， 手 动 输入 
http:/demo.cssworld.cn/5/2-6.php 或 者 扫 下 面 的 二 维 码 。 效 果 如 网 5-15 所 
示 〔 截 自 下 浏览 器 )。 





span: line-height:20px 


span: line-height:96px 





图 5-15 ” .box 元 素 的 高 度 均 是 96px 
也 就 是 说 : 无 论 内 联 元 素 l1ine-height 如 何 设置 ， 最 终 父 级 元 素 的 
高 度 都 是 由 数值 大 的 那个 line-height 决 定 的 ， 我 称 之 为 “内 联 元 
素 l]ine-height 的 大 值 特性 ”。 
可 能 很 多 人 会 有 疑问 : 为 什么 会 这 样 ? 逻辑 上 讲 不 通 啊 ? 


首先 ， 要 明确 一 点 : 内 联 元 素 是 支持 line-height 的 <span> 元 素 
上 的 line-height 也 确实 覆盖 了 .box 元 素 ， 但 是 ， 在 内 联 盒 模型 中 ， 
存在 一 些 你 看 不 到 的 东西 ， 没 错 ， 就 是 多 次 提 到 的 “幽灵 空白 节点 ”。 





正好 再 次 (也 是 最 后 一 次 ) 温习 一 下 “内 联 使 模型 ”的 知识 。 这 里 的 
<span> 是 一 个 内 联 元 素 ， 因 此 自身 是 一 个 “内 联 盒子 ”， 本 例 束 这 一 
个 “内 联 盒 子 ”"， 只 要 有 “内 联 盒 子 ” 在 ， 就 一 定 会 有 “ 行 框 例子 ”"， 就 是 每 
一 行内 联 元 素 外 面包 衷 的 一 层 看 不 见 的 盒子 。 然 后 ， 重 点 来 了 ， 在 每 
个 “ 行 框 盒子 ”前 面 有 一 个 宽度 为 8 的 具有 该 元 素 的 字体 和 行 高 属性 的 看 
不 见 的 “幽灵 空白 节点 ”， 如 果 套 用 本 案 ， 则 这 个 “幽灵 空白 节点 ”就 
在 <span> 元 素 的 前 方 ， 如 图 5-16 所 示 。 




















“strut” 


div class="box"> 
|<span> 内 容 . . .</span> 
</div> 





图 5-16 “幽灵 空白 节点 ”又 名 “strut”) 标注 
于 是 ， 就 效果 而 言 ， 我 们 的 HIML 实 际 上 等 同 于 : 


<div class="box"> 


字符 <span> 内 容 ...</spany> 
</div> 





这 下 就 好 理解 了 ， 当 .box 元 素 设 置 1ine-height:96px 时 ,，“ 字 
符 ” 高 度 96px; 当 设 置 1ine-height:26px 时 ，<span> 元 素 的 高 度 则 变 
成 了 96px， 而 行 框 盒 子 的 高 度 是 由 高 度 最 高 的 那个 “内 联 盒子 ”决定 的 ， 
这 就 是 .box 元 素 高 度 永远 都 是 最 大 的 那个 Line-height 的 原因 。 























知道 了 原因 也 就 能 够 对 症 下 药 ， 要 避免 “幽灵 空白 节点 ”的 干扰 ， 例 
如 ， 设 置 <span> 元 素 display:inline-block， 创 建 一 个 独立 的 “ 行 杠 
盒子 >， 这 样 <span> 元 素 设置 的 Line-height:26px 就 可 以 生效 了 ， 这 


也 是 多 行文 字 垂 下 居中 示例 中 这 么 设置 的 原因 。 





5.3 ”line-height 的 好 朋友 vertical-align 


终于 轮 到 line-height 的 好 朋友 vertical-align 上 场 了 ， 为 什么 
说 它们 是 好 朋友 呢 ? 因为 凡是 1ine-height 起 作用 的 地 方 vertical- 
align 也 一 定 起 作用 ， 只 是 很 多 时 候 ，vertical-align 默 默 地 在 背后 
起 作用 ， 你 没有 感觉 到 而 已 。 





很 多 人 都 有 这 样 一 个 错误 的 认 知 ， 认 为 对 于 单行 文本 ， 只 要 行 高 设 
置 多 少 ， 其 占据 高 度 就 是 多 少 。 比 方 说 ， 对 于 下 面 非常 简单 的 CSS 和 
HTML 人 代码: 


.box { line-height: 32px; } 
.box > span { font-size: 24px; } 


<div class="box"> 
<span> 文 字 </span> 
</div> 











.box 元 素 的 高 度 是 多 少 ? 


很 多 人 一 定 认为 是 32px: 因为 没有 设置 height 等 属性 ， 高 度 就 
由 line-height 决 定 ， 与 font-size 无 关 ， 所 以 这 里 明摆着 最 终 高 度 就 
是 32px。 





但 是 事实 上 ， 高 度 并 不 是 32px， 而 是 要 大 那么 几 像 素 〈( 受 不 同 字 
体 影响 ， 增 加 高 度 也 不 一 样 ，， 比 方 说 36px， 如 图 5-17 所 示 。 图 5-17 截 
自 此 示例 页 面 : http://demo.cssworld.cn/5/3-1.php。 








图 5-17 ”单行 文本 容器 高 度 不 等 于 行 高 


这 里 ， 之 所 以 最 终 .box 元 素 的 高 度 并 不 等 于 Line-height， 就 是 
因为 行 高 的 朋友 属性 vertical-align 在 背后 默默 地 下 了 黑手 。 


vertical-align 知 识 点 比 line-height 要 多 ， 我 们 现在 就 来 一 点 
一 点 地 揭 开 vertical-align 属 性 的 层 层面 纱 。 


5.3.1 vertical-align 家 族 基 本 认识 


抛 开 inherit 这 类 全 局 属性 值 不 谈 ， 我 把 vertical-align 属 性 值 
分 为 以 下 4 类 : 


。 线 类 ， 如 baseline (默认 值 ) 、top、middle、bottom; 
。 文本 类 ， 如 text-top、text-bottom; 

。 上 标 下 标 类 ， 如 sub、super:; 

。 数值 百分比 类 ， 如 28px、2em、26% 等 。 


实际 上 , “数值 百分比 类 ”应 该 是 两 类 ， 分 别 是 “数值 类 ”和 “百分比 
类 ”， 这 里 之 所 以 把 它们 合 在 一 起 归 为 一 类 ， 是 因为 它们 有 不 少 共性 ， 
包括 “都 市 数字 ”和 “行为 表现 一 致 ”。 











“都 带 数 字 ” 略 带 戏 庄 之 意 ， 没 什么 好 说 的 。“ 行 为 表现 一 怪 " 表 示 具 
有 相同 的 泻 染 规 则 ， 上 有 具体 为 : 根据 计算 值 的 不 同 ， 相 对 于 基线 往 上 或 往 
下 偏 移 ， 到 底 是 往 上 还 是 往 下 取决 于 vertical- align 的 计算 值 是 正 








值 还 是 负 值 ， 如 果 是 负 值 ， 往 下 仿 移 ， 如 果 是 正 值 ， 往 上 偏 移 。 


为 了 更 好 地 演示 vertical-align 数 值 类 属性 值 的 表现 ， 我 特意 做 
了 个 演示 页 面 ， 手 动 输入 http://demo.cssworld.cn/5/3-2.php 或 者 扫 右 侧 的 
二 维 码 。 





由 于 vertical-align 的 默认 值 是 baseline， 即 基线 对 齐 ， 而 基线 
的 定义 是 字母 x 的 下 边缘 。 因 此 ， 内 联 元 素 默 认 都 是 沿 着 字母 x 的 下 边缘 
对 齐 的 。 对 于 图 片 等 蔡 换 元 北 ， 往 往 使 用 元 素 本 喘 的 下 边缘 作为 基线 ， 
因此 ， 进 入 上 面 的 演示 页 面 ， 看 到 的 是 图 5-18 所 示 的 图 文 排列 效果 。 











由 于 是 相对 字母 x 的 下 边缘 对 齐 ， 而 中 文 和 部 分 吴 文 字形 的 下 边 毕 
要 低 于 字母 x 的 下 边缘 ， 因 此 ， 会 给 人 感觉 文字 是 明显 偏 下 的 ， 一 般 都 
会 进行 调整 。 比 方 说 ， 我 们 给 文字 内 容 设置 vertical- align:16px， 
则 文字 内 容 就 会 在 当前 基线 位 置 再 往 上 精确 偏 移 186px， 效 果 如 图 5-19 所 
示 。 

















母 X 
图 5-18 ”默认 的 图 文 对 齐 表现 





母 X 


文字 的 vertical-align 值 : E 10px | 
图 5-19 ”vertical-align:16px 偏 移 后 的 效果 


演示 页 面 还 提供 了 很 多 其 他 可 供 选 择 的 vertical-align 值 ， 经 过 
一 番 试 验 读者 就 会 发 现 ， 正 如 上 面 所 说 ， 负 值 全 部 都 是 往 下 偶 移 ， 正 值 
全 部 都 是 往 上 偶 移 ， 而 且 数 值 大 小 全 部 都 是 相对 于 基线 位 置 计算 的 ， 因 
此 ， 从 这 一 点 来 看 ，vertical-align:baseline 等 同 于 vertical- 
align:0。 














说 到 这 里 ， 我 就 忍 不 住 多 说 两 句 。 很 多 即使 工作 很 多 年 的 前 端 开发 
人 员 ， 也 可 能 不 知道 vertical-align 的 属性 值 支持 数值 ， 更 不 知道 支 
持 负 值 ， 这 着 实 让 我 很 意外 。 如 果实 用 性 差 那 还 好 理解 ， 关 键 
是 vertical-align 的 数值 属性 值 在 实际 开发 的 时 候 实 用 性 非常 强 。 





一 是 其 兼容 性 非常 好 。 在 之 前 ，vertical-align 属 性 的 兼容 性 被 
开发 人 员 诉 病 已 入 ， 因 为 需要 兼容 IE6 和 下 7 浏览 器 ， 而 这 些 浏览 器 的 
vertical-align 关 键 字 属 性 值 (如 middle、text-top 等 ) 的 泻 染 规 
则 和 其 他 浏览 器 大 相 径 庭 ， 很 多 人 不 知道 vertical-align 还 可 以 使 用 


数值 作为 属性 值 ， 结 果 CSS hack 满 天 飞 。 实 际 上 ，vertical-align 有 
一 些 属性 值 的 演 染 一 直 都 很 兼容 ， 一 个 是 默认 的 基线 对 齐 ， 另 一 个 就 是 
相对 于 基线 的 “数值 百分比 类 ”属性 值 偏 移 定位 。 也 就 是 说 ， 如 果 我 们 使 
用 类 似 vertical-align:16px 这 样 的 定位 ， 是 不 会 有 任何 兼容 性 问题 
的 ， 也 不 需要 写 CSS hack。 














二 是 其 可 以 精确 控制 内 联 元 素 的 垂直 对 齐 位置 。vertical-align 
属性 的 规范 和 统一 从 下 8 浏览 右 开 始 ， 由 于 我 们 现在 都 不 需要 兼容 IE8 以 
前 的 浏览 器 ，middle、text-top 等 关键 字 属 性 值 可 以 畅快 使 用 ， 但 是 
这 些 关 键 字 有 一 个 严重 的 不 足 ， 就 是 垂直 对 齐 位 置 是 固定 的 ， 往 往 最 后 
并 不 是 我 们 想 要 的 像素 级 精确 对 齐 效 果 ， 此 时 ， 还 是 需要 借助 “数值 百 
分 比 类 ”属性 值 才 可 以 。 








我 们 不 妨 看 一 个 简单 的 小 图 标 对 齐 的 例子 。 








假设 有 一 个 display 值 为 nline-block 的 尺寸 为 20 像 素 x20 像 素 的 
小 图 标 ， 默 认 状 态 下 ， 文 字 是 明显 偏 下 的 ， 类 似 图 5-20 中 “请 选择 ”三 个 
字 和 后 面 三 角 图 形 的 位 置 关 系 。 


这 里 ， 我 们 需要 的 是 垂直 居中 对 齐 效果 ， 所 以 很 多 人 都 使 用 具有 强 
烈 语 义 的 vertical- align:middle 控 制图 标的 垂直 位 置 ， 然 而 ， 由 于 
middle 并 不 是 真正 意义 上 的 垂直 居中 ， 因 此 还 是 会 有 像素 级 别 的 误 
差 ， 误 差 大 小 与 字体 和 字号 均 有 关 。 例 如 ， 在 本 例 中 ， 图 标 往 下 多 偏 移 
了 1 像素 而 导致 容 器 的 可 视 高 度 变 成 了 21 像 素 ， 如 图 5-21 所 示 。 











请 选择 


图 5-20 ”文字 位 置 比 图 标 低 


请 选择 > 


图 5-21 middle 属 性 导致 过 多 偏 移 从 而 使 容器 尺寸 超出 预期 





但 是 ， 如 果 我 们 使 用 精确 的 数值 ， 则 一 切 尽 在 掌控 之 中 。 例 如 ， 设 
置 vertical-align: -5px， 此 时 ， 图 标 和 文字 实现 了 真正 意义 上 的 垂 
直 居 中 ， 此 时 容器 的 可 视 高 度 和 当前 行 高 20 像 素 保 持 了 一 臻 ， 如 图 5-22 
所 示 。 有 眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/5/3-3.php 或 者 扫 下 面 
的 二 维 码 。 








图 5-22 -5px 实 现 的 完美 的 垂直 居中 








说 完 “ 数 值 类 ”和 “百分比 类 ”属性 值 的 行为 表现 ， 下 面 再 简单 说 说 平 
时 使 用 并 不 多 的 “百分比 类 ”属性 值 。 





在 CSS 世 界 中 ， 几 是 百分比 值 ， 均 是 需要 一 个 相对 计算 的 值 ， 例 


如 ，margin 和 padding 是 相对 于 宽度 计算 的 ，Line-height 是 相对 于 
font-size 计 算 的 ， 而 这 里 的 vertical- align 属 性 的 百分比 值 则 是 相 
对 于 line-height 的 计算 值 计 算 的 。 可 见 ，CSS 世 界 中 的 各 类 属性 相互 
间 有 着 紧密 联系 而 非 孤 立 的 个 体 。 


假设 某 元 素 的 line-height 是 28px， 那 么 此 时 vertical- 
align:-25% 相 当 于 设置 vertical-align:-5px。 按 照 之 前 学 到 的 知 
识 ， 会 发 现 百分比 值 无 论 什 么 时 候 都 很 实用 ， 因 此 会 给 人 感觉 
vertical-align 的 百分比 属性 值 也 会 非常 实用 ， 但 是 事实 上 ， 平 时 开 
发 中 很 少 使 用 。 原 因 在 于 ， 在 如 今 的 网 页 布局 中 ，1line-height 的 计算 
值 都 是 相对 固定 并 且 已 知 的 ， 因 此 ， 直 接 使 用 具体 的 数值 反而 更 方便 。 
比方 说 上 面 小 图 标 对 齐 的 例子 ， 我 们 肯定 会 直接 vertical- 
align:-5px， 而 不 会 使 用 vertical-align:-25%， 因 为 后 者 还 要 重新 
计算 ， 并 且 很 多 时 候 是 除 不 尽 的 ， 除 了 装 门面 以 外 ， 我 是 想不到 还 有 其 
他 使 用 的 理由 了 。 





这 就 是 为 什么 “百分比 类 ”属性 值 “ 简 单 说 说 ”的 原因 了 。 
5.3.2 ”Vertical-align 作 用 的 前 提 


很 多 人 ， 尤 其 CSS 新 手 ， 会 问 这 么 一 个 问题 “为 什么 我 设置 了 
vertical-align 却 没 任何 作用 ? ” 


因为 vertical-align 起 作用 是 有 前 提 条 件 的 ， 这 个 前 提 条 件 束 
是 : 只 能 应 用 于 内 联 元 素 以 及 display 值 为 table-cell 的 元 素 。 








换 句 话说 ，vertical-align 属 性 只 能 作用 在 display 计 算 值 


为 jnline、inline- block，inline-table 或 table-cell 的 元 素 
上 。 因 此 ， 默 认 人 情况 下 ，<span>、< strong>、<em> 等 内 联 元 

素 ，<img>、<button>、<input> 等 蔡 换 元 素 ， 非 HTML 规 范 的 自 定义 
标签 元 素 ， 以 及 <td> 单 元 格 ， 都 是 支持 vertical-align 属 性 的 ， 其 他 
块 级 元 素 则 不 文 持 。 


当然 ， 现 实 世界 是 没有 这 么 简单 的 。CSS 世 界 中 ， 有 一 些 CSS 属 性 
值 会 在 背后 默默 地 改变 元 素 display 属 性 的 计算 值 ， 从 而 导致 
vertical-align 不 起 作用 。 比 方 说 ， 浮 动 和 绝对 定位 会 让 元 素 块 状 
人 化， 因此， 下 面 的 代码 组 合 vertical-align 是 没有 理由 出 现 的 : 





.example { 
float: left; 
vertical-align: middle; /* 没有 作用 */ 





.example { 

position: absolute; 

vertical-align: middle; /* 没有 作用 */ 
} 








等 等 ， 我 好 像 听 到 有 人 说 :“ 不 是 vertical-align 没 有 作用 ， 而 是 
下 面 这 种 情况 。” 
.box { 

height: 128px; 


.box > img { 
height: 96px; 


vertical-align: middle; 
} 
<div class="box"> 

<img src="1.jpg"> 
</div> 





此 时 图 片 顶 着 .box 元素 的 上 边缘 显示 ， 根 本 没 冬 直 居中， 完全 没 起 作 


用 ! 


这 种 情况 看 上 去 是 vertical-align:middle 没 起 作用 ， 实 际 
上 ，vertical- A 染 的 ， 只 是 行 框 盒子 前 面 的 “幽灵 空 
日 节点 ”高 度 太 小 ， 如 果 我 们 通过 设置 一 个 足够 大 的 行 蜗 让 “幽灵 空 晶 节 
点 ”高 度 足 够 ， 就 会 看 到 vertical-align:middle 起 作用 了 ， CSS 代 码 
如 下 : 








.box { 
height: 128px; 
line-height: 128px;  /* 关键 CSS 属 性 */ 











} 

.box > img { 
height: 96px; 
vertical-align: middle; 





等 等 ， 我 又 听 到 有 人 说 :“ 为 什么 display:table-cel1 却 可 以 无 


告诉 你 ， 那 是 因为 对 table-cell 元 素 而 言 ，vertical-align 起 作 
用 的 是 table-cel1 元 系 上 自身 。 不 妨 看 下 面 一 段 代 但 : 


.Cell { 
height: 128px; 
display: table-cell; 
} 
.Cell > img { 


height: 96px; 

vertical-align: middle; 
} 
<div class="cell"> 

<img src="1.jpg"> 
</div> 





结果 图 片 并 没有 要 垂直 居中 的 迹象 ， 还 是 紧 贴 着 父 元 素 的 上 边缘 ， 





如 图 5-23 所 示 。 


但 是 ， 如 果 vertical-align:middle 是 设置 在 table-cell 元 素 
上 ，CSS 代 码 如 下 : 


.Cell { 
height: 128px; 
display: table-cell; 
vertical-align: middle; 


} 
.Cell > img { 
height: 96px; 





} 


那么 图 片 就 有 了 明显 的 变化 ， 如 图 5-24 所 示 。 





图 5-23 ”图 片 的 vertical-align:middle 没 有 效果 





图 5-24 table-cell 元 素 vertical-align:middle 有 效果 





所 以 ， 大 家 一 定 要 明确 ， 虽 然 束 效果 而 言 ，table-cell 元 素 设 
置 vertical-align 垂 直 对 齐 的 是 子 元 素 ， 但 是 其 作用 的 并 不 是 子 元 
素 ， 而 是 table-cell 元 素 自身 。 就 算 table-cell 元 素 的 子 元 素 是 一 个 














块 级 元 素 ， 也 一 样 可 以 让 其 有 各 种 垂直 对 齐 表 现 。 





table-cel1 垂 直 对 齐 有 对 应 的 演示 页 面 ， 手 动 输入 
http://demo.cssworld.cn/ 5/3-4.php 或 者 扫 右 侧 的 二 维 码 。 





5.3.3 Vertical-align 和 1line-height 之 间 的 关系 


vertical-align 和 1]ine-height 之 间 的 关系 很 明确 ， 即 “朋友 ” 关 
系 。 





最 明显 的 就 是 vertical-align 的 百分比 值 是 相对 于 line-height 
计算 的 ， 但 表面 所 见 的 这 点 关系 实际 是 只 是 冰山 一 角 ， 实 际 是 只 要 出 现 
内 联 元 素 ， 这 对 好 朋友 一 定 会 同时 出 现 。 








还 记 不 记得 一 开始 容器 高 度 不 等 于 行 高 的 例子 
Chttp:/demo.cssworld.cn/5/3-1.php) ? 这 就 是 这 对 好 朋友 搞 的 鬼 。 这 里 
要 为 大 家 深入 讲解 一 下 为 什么 会 出 现 这 样 的 现象 。 首 先 ， 我 们 仔细 看 一 
下 相关 的 代码 : 





.box { line-height: 32px; } 
.box > span { font-size: 24px; } 


<div class="box"> 
<span> 文 字 </span> 
</div> 





其 中 有 一 个 很 关键 的 点 ， 那 就 是 24px 的 font-size 大 小 是 设置 
在 <span> 元 素 上 的 ， 这 就 导 仅 了 外 部 <div> 元 素 的 字体 大 小 和 <span> 
元 素 有 较 大 出 人 。 








大 家 一 定 还 记得 图 5-16。 这 里 也 是 类 似 的 ，<span> 标 签 前 面 实 际 上 
有 一 个 看 不 见 的 类 似 字符 的 “幽灵 空白 节点 ”。 看 不 见 的 东西 不 利于 理 
解 ， 因 此 我 们 不 妨 使 用 一 个 看 得 见 的 字符 x 占 位 ， 同 时 “文字 ”后 面 也 添 
加 一 个 x， 便 于 看 出 基线 位 置 ， 于 是 就 有 如 下 HTML: 





<div class="box"> 
x<span> 文 字 x</span> 
</divy 
此 时 ， 我 们 可 以 明显 看 到 两 处 大 小 完全 不 同 的 文字 。 一 处 是 字母 X 
构成 了 一 个 “匿名 内 联 盒子 "， 另 一 处 是 "文字 x” 所 在 的 <span> 元 素 ， 构 
成 了 一 个 “内 联 盒子 ”。 由 于 都 受 1ine- height:32px 影 响 ， 因 此 ， 这 
两 个 “内 联 盒子 ”的 高 度 都 是 32px。 下 面 关 键 的 来 了 ， 对 字符 而 
言 ，font-size 越 大 字符 的 基线 位 置 越 往 下， 因为 文字 默认 全 部 都 是 基 
线 对 齐 ， 所 以 当 字 号 大 小 不 一 样 的 两 个 文字 在 一 起 的 时 候 ， 彼 此 就 会 发 
生 上 下 位 移 ， 如 有 果 位 移 距离 足够 大 ， 束 会 超过 行 蜗 的 限制 ， 而 导致 出 现 
意料 之 外 的 高 度 ， 如 图 5-25 所 示 。 


此 区 又。 芋 线 对 齐 , 上 下 位 和 LR ,.,， x 本 六 


和 庶 伐 者 示 考 伐 住 置 














图 5-25 不同 字号 文字 高 度 超出 行 高 示意 





图 5-25 非 党 直观 地 说 明了 为 何 最 后 容 吉 的 高 度 会 是 326pXx， 而 
非 line-height 设 置 的 32px。 


知道 了 问题 发 生 的 原因 ， 那 问题 就 很 好 解决 了 。 我 们 可 以 让 “幽灵 
空白 节点 ”和 后 面 <span> 元 素 字号 一 样 大 ， 也 就 是 : 


.box { 
line-height: 32px; 


font-size: 24px; 
} 


.box > span { } 








或 者 改变 垂直 对 齐 方式 ， 如 顶部 对 齐 ， 这 样 束 不 会 有 参差 位 移 了 : 


.box { line-height: 32px; } 
.box > span { 
font-size: 24px; 
vertical-align: top; 


} 














搞 清楚 了 大 小 字号 文字 的 高 度 问 题 ， 对 更 为 常见 的 图 片 抵 部 留 有 间 
隐 的 问题 的 理解 束 容 易 多 了 。 现 象 是 这 样 的 : 任意 一 个 块 级 元 系 ， 里 面 
奉 有 图 片 ， 则 块 级 元 系 高 度 基 本 上 都 要 比 图 片 的 高 有 度 局 。 例 如 : 








.box { 
width: 286px; 
outline: 1px solid #aaa; 
text-align: center; 


} 


.box > img { 
height: 96px; 
} 
<div class="box"> 
<img src="1.jpg"> 
</div> 








结果 .box 元 素 的 高 度 可 能 就 会 像 图 5-26 一 样 ， 底 部 平日 无 故 多 了 5 像 





间 隐 产生 的 三 大 元 凶 就 是 “网 灵 空 白 节 点 ” 1Line-height 和 
vertical-align 属 性 。 为 了 直观 演示 原理 ， 我 们 可 以 在 图 片 前 面 辅助 
一 个 字符 x 代 奉 “幽灵 空白 节点 ”， 并 想 办 法 通过 背景 色 显 示 其 行 高 范 
围 ， 于 是 ， 大 家 就 会 看 到 如 图 5-27 所 示 的 现象 。 








as 


图 5-26 图片 底部 间隙 示意 








图 5-27 图 片 间 际 原理 示意 


当前 line-height 计 算 值 是 28px， 而 font-size 只 有 14px， 
此 ， 字 母 x 往 下 一 定 有 人 至 少 3px 的 半 行 间距 (具体 大 小 与 字体 有 关 ) ， 而 
图 片 作 为 蔡 换 元 系 其 基线 是 自身 的 下 边缘 。 根 据 定义 ， 默 认 和 基线 (也 
就 是 这 里 字母 x 的 下 边缘 ) 对 齐 ， 字 母 x 往 下 的 行 高 产生 的 多 余 的 间 辽 就 
嫁 祸 到 图 片 下 面 ， 让 人 以 为 是 图 片 产生 的 间 际 ， 实 际 上 ， 是 “幽灵 空白 
节点 ” 1lLine-height 和 vertical-align 属 性 共同 作用 的 结 




















知道 了 原理 ， 有 要 清除 该 间 隐 ， 就 知道 如 何 对 症 下 药 了 。 方 法 很 多 ， 
具体 如 下 。 


(1) 图 片 块 状 化 。 可 以 一 口气 干掉 “幽灵 空白 节点 ” line- 
height 和 vertical-align。 





(2) 容器 line-height 足 够 小 。 只 要 半 行 间距 小 到 字母 x 的 下 边缘 
位 置 或 者 再 往 上 ， 自 然 束 没有 了 撑 开 底部 间 隐 高 上 度 空间 了 。 比 方 说 ， 容 
器 设置 1ine-height:6。 











(3) 容器 font-size 足 够 小 。 此 方法 要 想 生 效 ， 需 要 容器 的 Line- 
height 属 性 值 和 当前 font-size 相 关 ， 如 line-height:1.5 或 
者 1ine-height:156% 之 类 ; 否则 只 会 让 下 面 的 间 隐 变 得 更 大 ， 因 为 基 
线 位 置 因 字符 x 变 小 而 往 上 升 了 。 











(4) 图 片 设 置 其 他 vertical-align 属 性 值 。 间 隙 的 产生 原因 之 一 
就 是 基线 对 齐 ， 所 以 我 们 设置 vertical-align 的 值 为 top、middle、 
bottom 中 的 任意 一 个 都 是 可 以 的 。 








以 上 所 有 方法 在 演示 页 面 中 均 有 对 应 的 效果 展示 ， 手 动 输入 http:// 
demo.cssworld.cn/5/3-5.php 或 者 扫 右 侧 的 二 维 码 。 











在 4.3.5 节 最 后 提 到 了 一 个 “内 联 特性 导致 的 nargin 无 效 "的 案例 ， 代 
码 如 下 : 
<div class="box"> 


<img src="mm1.jpg"> 
</div> 


.box > img { 
height: 96px; 
margin-top: -2060pX; 
} 





此 时 ， 按 照 理解 ，-266px 远 远 超过 图 片 的 高 度 ， 图 片 应 该 完全 跑 
到 容器 的 外 面 ， 但 是 ， 图 片 依然 有 部 分 在 .box 元 素 中 ， 而 且 就 算 
margin-top 设 置 成 -99999px， 图 片 也 不 会 继续 往 上 移动 ， 完 全 失效 。 
其 原理 和 上 面 图 片 底部 留 有 间隙 实际 上 是 一 样 的 ， 图 片 的 前 面 有 个 “ 山 
灵 空 日 节点 ”， 而 在 CSS 世 界 中 ， 非 主动 触及 位 移 的 内 联 元 了 素 是 不 可 能 
跑 到 计算 容器 外 面 的 ， 导 致 图 片 的 位 置 被 < 幽灵 空白 节点 ”的 vertical- 
align:baseline 给 限 死 了 了。 我们 不 妨 把 看 不 见 的 “幽灵 空白 节点 ”使 用 
字符 X 人 代替 ， 原 因 束 一目了然 了 ， 如 图 5-28 所 示 。 








moarg ww-top -200p%; 





X 


图 5-28 vertical-align 导 致 nargin 负 值 无 效 





因为 字符 x 下 边缘 和 图 片 下 边缘 对 齐 ， 字 符 x 非 主动 定位 ， 不 可 能 跑 
到 容 占 外 面 ， 所 以 图 片 就 被 限 死 在 此 问题 ,margin-top 失 效 。 


最 后 ， 我 们 再 看 一 个 更 为 复杂 的 示例 。text-align:jusitfy 声 明 
可 以 帮助 我 们 实现 兼容 的 列表 两 端 对 齐 效果 ， 但 是 text- 
align:jusitfy 两 端 对 齐 需 要 内 容 超 过 一 行 ， 同 时 为 了 让 任意 个 数 的 列 
表 最 后 一 行 也 是 左 对 齐 排列 ， 我 们 需要 在 列表 最 后 辅助 和 列表 宽度 一 样 
的 空 标签 元 素来 占 位 ， 类 似 下 面 HTML 代 码 的 <i > 标签 : 








.box { 
text-align: justify; 


} 

.justify-fix { 
display: inline-block; 
width: 96px; 

} 

<div class="box"> 
<img src="1.jpg" width="96" 
<img src="1.jpg" width="96" 
<img src="1.jpg" width="96" 
<img src="1.jpg" width="96" 
<i class="justify-fix"></i> 
<i class="justify-fix"></i> 
<i class="justify-fix"></i> 

</div> 








空 有 的 ijnline-block 元 素 的 高 度 是 86， 按照 通常 的 理解 ， 下 面 应 该 是 
一 马 平川 ， 结 果 却 有 非常 大 的 空隙 存在 ， 如 图 5-29 所 示 。 


为 了 便于 大 家 看 个 究竟 ， 我 把 占 位 <i> 元 素 的 outLine 属 性 用 虚 外 
框 标示 一 下 ， 此 时 效果 如 图 5-30 所 示 。 








结果 发 现 ， 上 面 巨 大 的 空 了 是 由 占 位 <i> 元 系 上 面 和 下 面 的 间 隐 共 
同 组 成 的 。 








于 是 ， 问 题 来 了 : 上 面 的 间 隐 是 如 何 产生 的 ? 下 面 的 间 隐 是 如 何 产 
生 的 ? 如 果 去 除 这 些 间 隙 呢 ? 





很 多 时 候 ， 复 杂 问 题 是 由 简单 问题 组 合 而 成 的 。 实 际 上 ， 这 里 的 间 
We 都 是 vertical-align 和 
line-height 共 同 作 用 的 结 


在 大 办 加 阶 





二 





图 5-29 列表 下 面 留 有 巨大 的 间 院 








图 5-30” 占 位 的 <i> 元 素 位 置 示意 


按照 之 前 解决 问题 的 方法 ， 我 们 可 以 直接 给 .box 元 素来 个 line- 
height:6 解 决 垂 直 间 隐 问 题 ， 结 果 ， 这 样 设 置 之 后 的 效果 却 如 图 5-31 
所 示 。 图 片 和 图 片 之 间 的 间 际 是 没有 了 ， 但 是 图 片 和 最 后 的 占 位 元 素 之 
间 依 然 有 几 像素 的 间距 ， 真 有 些 让 人 抓 狂 了 。 这 究竟 是 为 什么 ? 











图 5-31 line-height:6 去 除 间 际 的 效果 图 


简单 现象 的 背后 往往 有 大 的 学 问 ， 要 明白 其 原因 ， 就 需要 说 
到 inline-block 元 素 和 基线 baseline 之 间 的 一 些 纠缠 的 关系 。 


5.3.4 深入 理解 vertical-align 线 性 类 属性 值 


1. inline-block 与 baseline 


vertical-align 属 性 的 默认 值 baseline 在 文本 之 类 的 内 联 元 素 那 
里 就 是 字符 x 的 下 边缘 ， 对 于 替换 元 素 则 是 替换 元 素 的 下 边缘 。 但 是 ， 
如 果 是 inline-block 元 系 ， 则 规则 要 复杂 了 : 一 个 ijnline-block 元 
素 ， 如 果 里 面 没有 内 联 元 素 ， 或 者 overflow 不 是 visible， 则 该 元 素 
的 基线 就 是 其 margin 底 边缘 ;否则 其 基线 就 是 元 素 里 面 最 后 一 行内 联 
元 素 的 基线 。 








还 是 没 反 应 过 来 ? 那 看 下 面 这 个 例子 ， 应 该 就 能 知道 什么 意思 了 。 


两 个 同 太 二 的 in1ine-block 水 平 元 素 ， 唯 一 区 别 就 是 一 个 是 衬 
的 ， 一 个 里 面 有 字符 ， 代 码 如 下 : 


.dib-baseline { 
display: inline-block; 
width: 156px; height: 156pX; 
border: 1px solid #cad5eb; 


background-color: #f6f3f9; 


} 
<span class="dib-baseline"></span> 
<Span class="dib-baseline">x-baselinex</span> 





结果 如 图 5-32 所 示 。 


你 会 发 现 ， 明 明 尺 寸 、display 水 平 都 是 一 样 的 ， 结 果 两 个 却 不 在 
一 个 水 平 线 上 对 齐 ， 为 什么 呢 ? 上 面 的 规范 已 经 说 明了 一 切 。 第 一 个 框 
里 面 没 有 内 联 元 素 ， 因 此 基线 就 是 容 圳 的 margin 下 边缘 ， 也 就 是 下 边 
框 下 面 的 位 置 ， 而 第 二 个 框 里 面 有 字符 ， 纯 正 的 内 联 元 素 ， 因 此 第 二 个 
框 束 是 这 些 字符 的 基线 ， 也 就 是 字母 x 的 下 边 毕 了。 于是， 我 们 束 看 到 
了 左边 框框 下 边缘 和 右边 框框 里 面 字符 x 底 边 对 齐 的 好 戏 。 














下 面 我 们 要 做 一 件 很 有 必要 的 事情 ， 来 帮助 我 们 理解 上 面 这 个 复杂 
的 例子 在 line-height 值 为 6 后 的 表现 。 什 么 事情 呢 ? 同情 境 模拟 ， 我 
们 也 设置 右边 框 的 line-height 值 为 6%， 于 是 ， 束 有 所 图 5-33 所 示 的 表 
现 。 





x-baseline 








图 5-32 ”相同 display 计 算 值 相同 尺寸 却 不 对 齐 


x-baseline 


图 5-33” 右 侧 设 置 1ine-height:6 后 的 对 齐 表现 





因为 字符 实际 占据 的 高 度 是 由 line-height 决 定 的 ， 当 line- 
height 变 成 6 的 时 候 ， 字 符 占 据 的 高 度 也 是 e， 此 时 ， 高 度 的 起 始 位 置 
就 变 成 了 字符 内 容 区 域 的 垂直 中 心 位 置 ， 于 是 文字 就 有 一 半 落 在 框 的 外 
面 了 。 由 于 文字 字符 上 移 了 ， 自 然 基 线 位 置 (字母 x 的 底 边 缘 ) 也 往 上 
移动 了 ， 于 是 两 个 框 的 垂直 落差 就 更 大 了 。 














明白 了 这 个 简单 例子 ， 也 就 能 明白 上 面 的 两 端 对 齐 的 复杂 例子 。 紧 
接着 上 面 的 复杂 例子 ， 如 果 我 们 在 最 后 一 个 占 位 的 <i> 元 素 后 面 新 增 同 
样 的 x-baseline 字 符 ， 则 结果 如 图 5-34 所 示 。 


图 5-34 line-height:6 同 时 添加 x-baseline 字 符 后 的 效果 图 








这 样 大 家 是 不 是 就 可 以 明白 为 何 <i> 元 系 上 面 还 有 一 点 间 际 了 ? 





居然 还 有 人 敏 眉 头 ? 那 我 再 用 文字 解释 下 : 现在 行 高 line-height 
是 e， 则 字符 x-baseline 行 间距 就 是 -1em， 也 就 是 高 度 为 6， 由 于 CSS 
世界 中 的 行 间 距 是 上 下 等 分 的 ， 因 此 ， 此 时 字符 x-baseline 的 对 齐 点 
就 是 当前 内 容 区 域 〈 可 以 看 成 文字 选中 背景 区 域 ， 如 图 5-35 所 示 ， 截 自 
Firefox 浏 览 器 ) 的 垂直 中 心 位 置 。 由 于 图 5-34 中 的 x-baseline 使 用 的 
是 微软 雅 黑 字 体 ， 字 形 下 沉 明 显 ， 因 此 ， 内 容 区 域 的 垂直 中 心 位 置 大 约 
在 字符 X 的 上 面 1V4 处 ， 而 这 个 位 置 就 是 字符 x-baseline 和 最 后 一 行 图 
片 下 边缘 交汇 的 地 方 。 











理解 了 x-baseline 的 垂直 位 置 表 现 ， 间 隙 问题 就 很 好 理解 了 。 由 
于 前 面 的 <i class= "justify-fix"></i> 是 一 个 jnline-block 的 空 
元 素 ， 因 此 基线 就 是 自 映 的 底部 ， 于 是 下 移 了 差不多 3/4 个 x 的 高 度 ， 这 
个 下 移 的 高 度 就 是 上 面 产生 的 间 际 高 度 。 








好 了 ， 一 旦 知道 了 现象 的 本 质 ， 我 们 就 能 轻松 对 症 下 药 了 ! 要 么 改 
变 占 位 <i> 元 素 的 基线 ， 要 么 改造 “幽灵 空白 节点 ”的 基线 位 置 ， 要么 使 
用 其 他 vertical-align 对 齐 方 式 。 





首先 来 个 最 有 意思 的 方法 ， 即 改变 占 位 <i> 元 素 的 基线 。 这 个 很 简 
单 ， 只 要 在 空 的 Ci> 元 素 里 面 随便 放 几 个 字符 就 可 以 了 。 例 如 ， 塞 一 人 
空格 &nbsp: 

.box { 


text-align: Justify 
line-height: ©; 


} 
<div class="box"> 
<img src="1.jpg" width="96"> 


<img src="1.jpg" width="96"> 

<img src="1.jpg" width="96"> 

<img src="1.jpg" width="96"> 

<i class="justify-fix">&nbsp;</i> 

<i class="justify-fix">&nbsp;</i> 

<i class="justify-fix">&nbsp;</i> 
</div> 








这 时 会 发 现 间 隐 没有 了 1! 为 什么 呢 ? 因 为 此 时 <i> 元 素 的 基线 是 里 
面 字 符 的 基线 ， 此 基线 也 正好 和 外 面 的 “幽灵 空白 市 友 ” 的 基线 位 置 一 
致 ， 没 有 了 错位 ， 上 自然 束 不 会 有 间 际 啦 ! 效果 如 图 5-36 所 示 。 






凋 成 contert area 


一 一 一 一 一 


图 5-35 x-baseline 字 符 content area 示 意 





图 5-36 ”字符 去 除 间 阶 


改造 “幽灵 空白 节点 ”的 基线 位 置 可 以 使 用 font-size， 当 字体 足够 
小 时 ， 基 线 和 中 线 会 重合 在 一 起 。 什 么 时 候 字体 足够 小 呢 ? 就 是 8e。 于 
是 ， 如 下 CSS 代 码 (line-height 如 果 是 相对 font-size 的 属性 
值 ，line-height:6 也 可 以 省 掉 ) : 


.box { 
text-align: justify; 


font-size: 90; 


} 





效果 如 图 5-37 所 示 。 





图 5-37 font-size:6 去 除 间 际 


看 上 去 好 像 效 果 类 似 ， 部 是 没有 间 际 ， 但 是 font-size:8 下 的 各 类 
对 齐 效 果 都 更 彻 抵 。 





使 用 其 他 vertical-align 对 齐 方 式 就 是 让 <i> 占 位 元 
素 vertical-align:top/bottom 之 类 ， 当 前 ， 前 提 还 是 先 让 容 
器 Line-height:6， 例 如 : 





.box { 
text-align: justify 
line-height: 6; 


} 
.justify-fix { 
vertical-align: bottom; /* top、 middle 都 可 以 */ 











关于 此 复杂 案例 有 对 应 的 原型 示意 ， 手 动 输入 
http://demo.cssworld.cn/ 5/3-6.php 或 者 扫 右 侧 的 三 维 码 。 





准确 了 解 inline-block 与 baseline 之 间 多 变 的 关系 ， 除 了 便于 理 
解 一 些 令 人 抓 狂 的 现象 外 ， 还 可 以 专门 利用 其 来 简化 我 们 的 开发 ， 比 方 
说 一 直 很 头疼 的 背景 小 图 标 和 文字 对 齐 的 问题 。 我 这 里 再 给 大 家 介绍 一 
个 vertical-align 负 值 以 外 的 其 他 处 理 技巧 。 








例如 ， 要 删除 一 个 小 图 标 ， 通 常 的 做 法 无 非 是 下 面 两 种 : 
<i class="icon-delete"></i> 删除 
或 者 直接 一 个 按钮 图 标 ， 里 面包 含 文本 内 容 ， 保 证 可 访问 性 : 


而 以 上 两 种 实现 基本 上 图 标 元 素 的 基线 都 是 元 素 的 下 边缘 ， 之 前 讲 
过 inline-block 元 素 的 基线 规则 : 一 个 inline-block 元 素 ， 如 果 里 面 





没有 内 联 元 素 ， 或 者 overflow 不 是 visible， 则 该 元 素 的 基线 就 是 
其 margin 底 边缘 。 


上 面 的 第 一 种 做 法 中 ，<i class="icon-delete"></i> 是 一 个 空 
标签 ， 里 面 无 内 联 元 素 ， 因 此 ， 基 线 是 底 边 缘 ;， 而 第 二 种 做 法 中 ， 虽 然 
里 面 有 文字 ， 但 是 此 文字 是 不 显示 的 ， 因 此 开发 者 习惯 设 
置 overflow:hidden， 这 又 导致 基线 是 底 边 缘 。 而 正 是 由 于 基线 是 元 
素 底 边缘 ， 才 导致 图 标 和 文字 默认 严重 不 对 齐 ! 但 是 ， 我 们 不 妨 反 过 来 
试想 下 ， 如 果 图 标 和 后 面 的 文字 高 度 一 致 ， 同 时 图 标的 基线 和 文字 基线 
一 样 ， 那 包 不 是 图 标 和 文字 天 然 对 齐 ， 根 本 就 不 需要 margin 
或 vertical-align 的 垂直 偏 移 了 ? 











完全 可 行 ， 这 里 分 享 一 下 我 总 结 的 一 套 基 于 26px 图 标 对 齐 的 处 理 技 
巧 ， 该 技巧 有 下 面 3 个 要 扩 。 











(1) 图 标高 度 和 当前 行 高 都 是 28px。 很 多 小 图 标 背 景 合并 工具 都 
是 图 标 蜗 蜗 多 大 生成 的 CSS 宽 高 就 是 多 大 ， 这 其 实 并 不 利于 形成 可 以 整 
站 通用 的 CSS 策 上 略 ， 我 的 建议 是 图 标 原 图 先 扩展 成 统一 规格 ， 比 方 说 这 
里 的 28pxx28px， 然 后 再 进行 合并 ， 可 以 节约 大 量 CSS 以 及 对 每 个 图 标 
对 齐 进行 不 同 处 理 的 开发 成 本 。 











(2) 图标 标签 里 面 永远 有 字符 。 这 个 可 以 借助 :before 或 :after 
伪 元 素 生 成 一 个 空格 字符 轻松 搞定 。 


(3) 图 标 CSS 不 使 用 overflow:hidden 保 证 基线 为 里 面 字 符 的 基 
线 ， 但 是 要 让 里 面 潜在 的 字符 不 可 见 。 


于 是 ， 最 终 形成 的 最 佳 图 标 实践 CSS 如 下 : 


.Icon { 
display: inline-block; 
width: 26px; height: 28px; 
background: url(sprite.png) no-repeat; 
white-space: nowrap; 
letter-spacing: -1lem; 
text-indent: -999em; 

} 

.icon:before { 
content: '\368060'; 

} 

/* 其 体 图 标 */ 

.ijcon-xxx { 
background-position: 6 -20px; 

} 


























现在 ， 我 们 套用 这 里 的 28px 处 理 的 策略 ， 看 看 上 面 两 种 删除 小 图 标 
处 理 的 对 齐 效 果 如 何 ， 手 动 输入 http://demo.cssworld.cn/5/3-7.php 或 者 扫 
下 面 的 二 维 码 。 对 齐 效 果 如 图 5-38 所 示 〈 手 机 截屏 副 辑 ) 。 





1. 空 标签 后 面 跟随 文本 3. 字号 变 大 
疝 删除 侧 删除 


2. 标签 里 面 有 "删除 "文本 向 随便 什么 文字 
疝 随便 什么 文字 





图 5-38 ”基于 内 联 基 线 的 小 图 标 对 齐 效果 截图 





可 以 看 到 ， 小 图 标 和 文字 对 齐 完全 不 受 font-size 大 小 的 影响 。 可 
以 说 ， 整 个 网 站 所 有 小 图 标的 对 齐 问题 都 可 以 解决 了 ， 节 省 了 大 量 CSS 
代码 ， 降 低 了 大 量 开 友和 维护 成 本 ， 是 个 好 处 非常 明显 的 处 理 技 巧 。 


最 后 有 必要 说 明 一 下 ， 这 里 298px 只 是 一 种 经 验 取 值 ， 因 为 目前 的 常 
见 站 点 的 字号 和 行 间距 比较 合乎 这 个 大 小 。 如 果 你 的 项 目 设计 很 大 气 ， 
字 写 默认 都 是 16px， 那 么 图 标 规格 和 默认 行 写 可 能 24px 会 更 合适 一 
忆 。 





2. 了 解 vertial-align:top/bottom 


vertial-align:top 和 vertial-align:bottom 基 本 表现 类 似 ， 
只 是 一 个 “上 ”一 个 “FF”， 因此 合 在 一 起 讲 ;。 





顾名思义 ，vertial-align:top 就 是 垂直 上 边缘 对 齐 ， 有 具体 定义 
着 下 





。 内 联 元 素 : 元 素 底 部 和 当前 行 框 盒子 的 顶部 对 齐 。 
。 table-cell 元 素 : 元 素 底 padding 边 毕 和 表格 行 的 顶部 对 齐 。 





用 更 通俗 的 话 解 释 就 是 : 如 果 是 内 联 元 素 ， 则 和 这 一 行 位 置 最 高 的 
内 联 元 素 的 顶部 对 齐 ; 如 果 display 计 算 值 是 table-cell 的 元 素 ， 我 


们 不 妨 脑 补 成 <td> 元 系 ， 则 和 <tr> 元 素 上 边缘 对 齐 。 


vertial-align:bottom 声 明 与 此 类 似 ， 只 是 把 “顶部 ” 换 成 “ 底 
痢 B” 。 把 “上 边缘 ” 换 成 “下 边缘 ” a 


需要 注意 的 是 ， 内 联 元 系 的 上 下 边缘 对 齐 的 这 个 “边缘 ”是 当前 “ 行 
框 盒子 "的 上 下 边缘 ， 并 不 是 块 状 容 器 的 上 下 边缘 。 


vertial-align 属 性 中 的 top 和 bottom 值 可 以 说 是 最 容易 理解 的 
vertial-align 属 性 值 了 ， 并 且 表 现 相 当 稳 定 ， 不 会 出 现 难以 理解 的 现 
象 ， 在 实际 开发 的 时 候 也 相当 常用 。 


末了 ， 出 个 小 题 测试 下 大 家 : 已 知 一 个 <div> 元 素 中 有 两 张 图 片 ， 
其 中 后 面 一 张 图 片 设置 了 vertial-align:bottom， 请 问 这 两 张 图 片 的 
底 边缘 是 对 齐 的 吗 ? 





答案 : 不 是 不 对 齐 的。 因为 图 片 所 在 行 框 盒 子 的 最 低 点 是 “幽灵 空 
日 和 而 扩 ” 的 奔 部 ， 所 以 最 后 的 表现 会 如 图 5-39 所 示 。 








图 5-39 ”两 张 图 片 底部 不 对 齐 


3. vertial-align:middle 与 近似 垂直 居中 


在 5.2 节 已 提 到 ，1line-height 和 vertial-align: middle 实 现 的 
多 行文 本 或 者 图 片 的 垂直 居中 全 部 都 是 “近似 垂直 居中 ”， 原因 


与 vertial- align:middle 的 定义 有 关 。 





。 内 联 元 素 : 元 素 的 垂直 中 心 点 和 行 框 盒子 基线 往 上 1/2 x-height 处 
对 齐 。 

。 table-cell 元 素 : 单元 格 填充 盒子 相对 于 外 面 的 表格 行 拓 中 对 
齐 。 





table-cel1 元 素 的 vertial-align:middle 中 规 中 矩 ， 没 什么 好 
说 的 ， 倒 是 内 联 元 素 的 vertial-align:middle 有 很 多 说 不 完 的 故事 。 
定义 中 “基线 往 上 1/2 x-height 处 "， 指 的 就 是 middle 的 位 置 ， 和 仔细 品味 
一 下 , “基线 ?就 是 字符 x 底 边缘 ， 而 x-height 就 是 字符 x 的 高 度 。 考 虑 
到 大 部 分 字体 的 字符 x 上 下 是 等 分 的 ， 因 此 ， 从 “基线 往 上 1/2x-height 
处 ”我 们 就 可 以 看 出 是 字符 x 中 心 交 又 点 的 位 置 。 换 句 话说 就 
是 ，vertial-align:middle 可 以 让 内 联 元 素 的 真正 意义 上 的 垂直 中 心 
位 置 和 字符 x 的 交叉 点 对 齐 。 

















基本 上 所 有 的 字体 中 ， 字 符 x 的 位 置 都 是 偏 下 一 点 儿 的 ，font- 
size 越 大 偏 移 越 明 显 ， 这 才 导 致 默认 状态 下 的 vertial-align:middle 
实现 的 都 是 “近似 垂直 居中 ”。 





为 了 更 直观 地 表示 上 面 的 解释 ， 我 特意 做 了 个 演示 页 面 ， 手 动 输入 
http://demo.cssworld.cn/5/3- 8.php 或 者 扫 下 面 的 二 维 码 。 演 示 页 面 有 两 条 
水 平 线 ， 其 中 ， 图 片上 线 显 示 的 是 图 片 垂直 中 心 位 置 ， 而 贯 罕 整个 容 髓 
的 线束 是 容器 的 垂直 中 心 位 置 ， 可 以 看 到 ， 默 认 状 态 下 ， 两 根 线 就 不 在 
一 个 水 平 线 上 ， 如 图 5-40 所 示 。 














图 5-40 ”两 条 垂直 中 心 线 示 意 





因为 图 片上 的 那 根 线 趋 回 于 和 字符 x 的 中 心 靠近 ， 而 不 是 容器 的 敢 
直 中 心 。 如 果 我 们 把 font-size 改 大 ， 如 48px， 则 效果 更 加 明显 ， 如 图 
5-41 所 示 。 





图 5-41 大 字号 下 两 条 垂直 中 心 线 距离 更 明显 











如 果 想 要 实现 真正 意义 上 的 垂直 居中 对 齐 ， 只 要 想 办 法 让 字符 x 的 
中 心 位 置 就 是 容器 的 垂直 中 心 位 置 即 可 ， 通 常 的 做 法 是 设置 font- 


size:8， 整 个 字符 x 缩小 成 了 一 个 看 不 见 的 点 ， 根 据 l1ine-height 的 半 
行 间 距 上 下 等 分 规则 ， 这 个 点 就 正好 是 整个 容器 的 垂直 中 心 位 置 ， 这 样 
就 可 以 实现 真正 意义 上 的 垂直 居中 对 齐 了 。 


不 过 话 又 说 回来 ， 平 常 我们 开发 的 时 候 ，font-size 可 能 就 12px 
或 14px， 虽 然 最 终 的 效果 是 “近似 垂直 居中 ”， 但 偏差 也 就 1px 一 2px 的 
样子 ， 普 通用 户 其 实 是 很 难 觉察 到 其 中 的 差异 的 ， 因 此 ， 是 否 非 要 真正 
意义 上 垂直 居中 ， 还 是 要 根据 项 目的 实现 情况 权衡 做 出 决策 。 








5.3.5 ”深入 理解 vertical-align 文 本 类 属性 值 


文本 类 属性 值 指 的 就 是 text-top 和 text-bottom， 定 义 如 下 。 


vertical-align:text-top: 盒子 的 顶部 和 父 级 内 容 区 域 的 顶部 


对 齐 。 
。Vertical-align:text-bottom: 盒子 的 底部 和 父 级 内 容 区 域 的 
底部 对 齐 。 





其 中 ， 理 解 的 难 扣 在 于 “ 父 级 内 容 区 域 "， 这 是 个 什么 东西 呢 ? 


内 容 区 域 从 3.4.2 节 开始 就 有 多 次 提 及 ， 在 本 书 中 ， 其 可 以 看 成 是 
Firefox/IE 浏 览 器 文本 选中 的 背景 区 域 ， 或 者 默认 状态 下 的 内 联 文本 的 背 
景色 区 域 。 而 所 谓 “ 父 级 内 容 区 域 ” 指 的 就 是 在 父 级 元 素 当 前 font-size 
和 font-family 下 应 有 的 内 容 区 域 大 小 。 


因此 ， 这 个 定义 又 可 以 理解 为 (以 text-top 举 例 ) : 假设 元 素 后 
面 有 一 个 和 父 元 素 font- size、font-family 一 模 一 样 的 文字 内 容 ， 
则 vertical-align:text-top 表 示 元 素 和 这 个 文字 的 内 容 区 域 的 上 边 


缘 对 齐 。 





我 特意 制作 了 一 个 很 直观 的 演示 页 面 来 示意 text-top 和 text- 
bottom 属 性 值 的 样式 表现 ， 手 动 输入 http://demo.cssworld.cn/5/3-9.php 或 
者 扫 右 侧 的 二 维 码 。 此 演示 页 面 有 3 个 不 同 font-size， 分 别 
是 16px、24px 和 32px。 父 元 素 默 认 是 16px， 我 们 可 以 清晰 地 看 到 图 三 
的 上 边缘 和 16px 文 字 的 内 容 区 域 的 上 边缘 对 齐 了 ， 如 图 5-42 所 示 。 点 击 
其 他 单 选 按钮 ， 改 变 父 级 元 素 的 font-size 大 小 ， 如 24px， 就 会 看 到 图 
片上 边缘 〈 对 齐 线 ) 和 24px 字 写 大 小 的 文字 的 内 容 区 域 的 上 边缘 对 齐 
了 ， 如 图 5-43 所 示 。 





设置 父 级 font-size 大 小 : 
®@) 16PX 24px 32pX 


1. vertical-atign:text-top 





图 5-42 ”图 片上 边缘 和 16px 文 字 的 内 容 区 域 的 上 边缘 对 齐 


设置 父 级 font-size 大 小 : 
16px  (®) 24px 32px 


1. vertical-align:text- 





图 5-43 ”图 片上 边缘 和 24px 文 字 的 内 容 区 域 的 上 边缘 对 齐 


好 了 ， 现 在 我 们 深入 理解 了 文本 类 属性 值 的 表现 规则 ， 这 对 我 们 实 
际 开发 有 什么 用 呢 ? 我 这 里 郑重 地 告诉 大 家 : 没有 任何 作用 。 准 确 地 
讲 ， 应 该 是 其 和 其 他 垂直 定位 属性 相 比 没有 任何 的 优势 ， 尺 管理 论 上 讲 
其 特点 明确 ， 并 且 具 有 以 下 几 个 明显 的 优势 。 











首先 ， 文 本 类 属性 值 的 垂直 对 齐 与 左右 文字 大 小 和 高 度 部 没有 关 
系 ， 而 所 有 线性 类 属性 值 的 定位 都 会 受到 兄弟 内 联 元 系 的 影 啊 。 


其 次 ， 文 本 类 属性 值 的 垂直 对 齐 可 以 像素 级 精确 控制 。 通 常 而 言 ， 
无 论 是 图 文 对 齐 还 是 文字 和 文字 对 齐 ， 文 字 大 小 或 图 片 的 高 度 都 是 固定 
的 ， 不 可 能 说 为 了 对 齐 效 果 ， 把 设计 师 设计 好 的 16px 文 字 改 成 14px， 
因此 ， 线 性 类 属性 值 中 的 baseline 和 middle 实 现 的 对 齐 我 们 是 无 法 精 
确 控 制 其 垂直 对 齐 位 置 的 ， 因 为 这 两 个 值 的 对 齐 是 和 字符 走 的 。 但 
是 ，text-top 和 text-bottom 则 无 此 问题 : 如 果 是 图 文 对 齐 ， 我 们 可 
以 通过 改变 父 元 素 的 font -size 大 小 精确 控制 对 齐 位 置 ， 如 果 是 文字 和 
文字 对 齐 ， 我 们 可 以 改变 文字 的 1ine-height， 也 就 是 通过 改变 元 素 的 
高 度 (上 下 边缘 位 置 ) 精确 控制 对 齐 位置 。 

















然而 ， 命 运 就 是 如 此 不 公 ， 有 些 CSS 属 性 设计 的 初衷 可 能 很 简单 ， 
结果 却 满天飞 ， 有 些 属性 值 理论 应 该 有 大 成 ， 实 际 却 无 人 问 
津 。vertical-align 的 文本 类 属性 值 就 是 代表 之 一 。 它 为 什么 会 有 这 
样 糟 糕 的 际遇 呢 ? 











我 认为 原因 很 多 ， 有 具体 有 以 下 几 个 。 


(1) 使 用 场景 缺乏 。 当 前 CSS 重 构 以 精致 布局 为 主流 , “对齐 文 
本 ”的 场景 相 比 旧时 代 要 少 很 多 。 





(2) 文本 类 垂直 对 章 理解 成 本 高 。 我 发 现 这样 一 个 现象 ， 当 需要 
调整 内 联 元 素 垂 直 位 置 的 时 候 ， 有 人 往往 会 使 用 非 设 计 本 意 的 margin 
定位 甚至 relative 定 位 去 纠正 不 对 齐 的 问题 ;或 者 更 资深 一 点 儿 的 开 
发 人 员 会 配合 具体 场景 使 用 合适 的 vertical-align 数 值 进 行 定位 。 为 
什么 呢 ? 因为 后 面 这 3 种 垂直 定位 策略 显然 要 比 text-top 和 text- 
bottom 属 性 值 容易 理解 得 多 ， 简 单 才 是 王道 。 














(3) 内 容 区 域 不 直观 旦 易 变 。 如 今 实际 对 外 的 项 目 布局 都 讲求 精 
确 布 局 、 像 际 级 还 原 。 而 内 容 区 域 默认 是 看 不 见 的 ， 需 要 根据 经 验 或 者 
其 他 手段 才能 呈现 ， 这 么 矿 烦 的 事情 显然 是 会 影响 开发 效率 的 ; 然后 最 
大 的 问题 还 在 于 “ 易 变 ”， 内 容 区 域 的 大 小 是 和 字体 font-family 密 切 相 
关 的 ， 要 知道 ， 不 同 的 系统 、 不 同 的 平台 使 用 的 字体 往往 都 是 不 一 样 
的 ， 比 方 说 ，Windows 系 统 下 使 用 “微软 雅 黑 ”字体 ， 那 能 保证 OS X 系 统 
或 者 手机 系统 还 有 “微软 雅 黑 ”字体 吗 ? 一 旦 字体 不 一 样 ， 内 容 区 域 大 小 
就 会 不 一 样 ， 导 致 的 束 是 不 同 设备 下 对 齐 的 位 置 是 不 一 样 的 ， 也 就 是 我 
们 所 说 的 “不 兼容 *"。 如 果 对 视觉 要 求 较 高 ， 这 显然 束 是 一 个 比较 严重 的 




















问题 了 。 





于 是 ， 这 一 系列 的 原因 导致 文本 类 属性 值 虽然 理论 上 强大 ， 但 实际 
实用 价值 却 有 限 ， 至 少 我 没 太 现 什么 场景 下 其 具有 明显 的 使 用 优势 。 


5.3.6 ”简单 了 解 vertical-align 上 标 下 标 类 属性 值 


vertical-align 上 标 下 标 类 属性 值 指 的 就 是 sub 和 super 两 个 值 ， 
分 别 表示 下 标 和 上 标 。 在 HTML 代 码 中 ， 有 两 个 标签 语义 就 是 下 标 和 上 
标 ， 分 别 是 上 标 <sup> 和 下 标 <sub>， 因 为 这 两 个 HTML 标签 长 得 很 类 
似 ， 所 以 很 多 人 经 常 记 不 清 到 底 哪个 是 上 标 哪个 是 下 标 。 我 告诉 大 家 一 
个 记忆 方法 ， 就 是 看 p 和 b 两 个 字母 的 圈 圈 位 置 ， 如 果 圈 圈 在 上 面 ， 就 
是 “上 标 ”， 如 果 圈 圈 在 下 面 ， 就 是 “下 标 ”。 


实际 上 ， 这 两 个 HTML 标 签 不 仅 语义 上 和 sub 和 super 类 似 ， 长 相 
上 也 很 像 ， 只 是 我 一 直 没 想 明 白 : 为 什么 CSS 的 vertical-align 属 性 
的 下 标 是 subp， 和 HTML 标 签 <csup> 一 样 ， 而 上 标 super 却 多 了 个 er， 和 
HTML 标 签 <csub> 不 一 样 了 呢 ? 


最 后 ，HTML 标 签 <csup> 和 <sup> 的 vertical-align 属 性 也 和 
super 和 sub 有 着 非 同 一 般 的 关系 ， 那 就 是 <sup> 标 签 默 认 的 vertical- 
align 属 性 值 就 是 super，<sub> 标 签 默认 的 vertical-align 属 性 值 就 
是 sub。 上 标 香 用 作 标 注 ， 如 图 5-44 所 示 。 


对 应 HTML 如 下 : 


zhangxinxu<sup>[1]</sup> 





下 标 在 数学 公式 、 化 学 表达 式 中 用 得 比较 多 ， 如 图 5-45 所 示 。 对 应 
HTML 如 下 : 


NH<sub>4</sub>HCO<sub>3</sub> 


zhangxinxu[ 


图 5-44 ”上 标 效 果 示 意 


NHaHCO; 


图 5-45 下 标 效 果 示 意 


于 本 a a di 
上 面 这 点 儿 了 ， a oid 。 看 看 这 两 个 属性 
值 的 定义 ， 就 知道 我 为 什么 这 么 说 了 。 


。vertical-align:super: 提高 盒子 的 基线 到 父 级 合适 的 上 标 基线 
位 置 。 

。 vertical-align:sub: 降低 盒子 的 基线 到 父 级 合适 的 下 标 基 线 位 
置 。 


没 想到 规范 中 也 会 出 现 “ 合 适 ” 这 样 横 棱 两 可 的 名 词 ， 这 就 让 人 很 范 
然 了 。 所 以 ， 想 利用 此 属性 精确 定位 和 布局 显得 困难 重重 ， 只 能 用 来 实 
现 对 垂直 位 置 要 求 不 高 的 上 标 下 标 效果 。 














然后 ， 有 一 点 需要 注意 ，vertical-align 上 标 下 标 类 属性 值 并 不 
会 改变 当前 元 素 的 文字 大 小 ， 千 万 不 要 被 HIML 标 签 中 的 <sup> 和 





<Ssub> 误 导 ， 因 为 这 两 个 HTML 标签 默认 font-size 是 smaller， 如 网 5- 
46 中 所 示 的 Chrome 浏 览 器 内 置 CSS 设 置 。 


sub { user agent stylesheet 
vertical-align: sub; 
font-size: smaller; 


} 


图 5-46 ”Chrome 浏 览 器 csub> 内 置 CSS 声 明 截 图 


5.3.7 无 处 不 在 的 vertical-align 








本 节 算 是 对 之 前 内 容 的 一 个 必要 的 总 结 。 对 于 内 联 元 素 ， 如 果 大 家 
遇 到 不 太 好 理解 的 现象 ， 请 一 定 要 意识 到 ， 有 个 “ 约 灵 空白 节点 ”以 及 无 
处 不 在 的 vertical-align 属 性 。 








虽然 同属 线性 类 属性 值 ， 但 是 top/bottom 和 baseline/middle 却 
是 完全 不 同 的 两 个 帮派 ， 前 者 对 齐 看 边缘 看 行 框 盒子， 而 后 者 是 和 字符 
x 打 交道 。 因 此 ， 细 细 考 完 ， 两 者 的 行为 表现 实则 大 相 径 隆 ， 一 定 要 注 


意 区 分 。 





vertical-align 属 性 值 的 理解 可 以 说 是 CSS 世 界 中 的 最 难点 。 首 
先 ， 需 要 深入 了 解 内 联 盒 模型 ， 其次， 不 同属 性 值 定 义 完全 不 同 ， 且 很 
多 属性 table-cel11 元 系 有 着 不 同 的 定义 ;同时 最 终 表 现 与 字符 X、 
line-height， 和 font-size、font-family 属 性 密切 相关 ， 如 果 要 通 
透 ， 需 要 对 这 些 属性 都 有 比较 深入 的 了 解 ， 因 此 ， 本 章 的 内 容 是 值得 反 
复 研 读 的 。 








本 章 目 前 给 出 的 所 有 示例 都 是 展示 单 属性 值 和 默认 值 baseline 如 
何 作用 的 ， 但 是 实际 开发 的 时 候 ， 经 常会 出 现 前 后 两 个 内 联 元 素 同 时 设 


置 baseline 以 外 属性 值 的 情况 ， 有 些 人 可 能 会 手足 无 指 ， 毕 竟 单 个 属 
性 值 的 理解 就 够 哈 ， 多 个 属性 一 起 岂 不 脑子 都 转 不 过 来 ? 实际 上 ， 根 据 
我 的 反复 测试 和 确认 ，vertical-align 各 类 属性 值 不 存在 相互 冲突 的 
情况 ， 虽 然 菜 个 vertical-align 属 性 值 确实 会 影响 其 他 元 素 的 表现 ， 

但 是 这 种 作用 并 不 是 直接 的 。 所 以 ， 在 分 析 复 杂 场 景 的 时 候 ， 仪 需要 套 
用 定义 分 析 当 前 vertical-align 值 的 作用 就 可 以 了 。 


5.3.8 基于 vertical-align 属 性 的 水 平 垂 直 居 中 弹 框 


最 后 ， 推 荐 一 个 我 自己 觉得 非常 棒 的 vertical-align 属 性 实践 ， 
就 是 使 用 纯 CSS 实 现 大 小 不 固定 的 弹 框 永远 居中 的 效果 ， 并 且 如 果 伪 元 
素 换 成 普通 元 素 ， 连 IE7 浏 览 器 都 可 以 兼容 。 





其 HTML 结 构 很 简单 ， 一 个 container， 显 示 半 透明 背景 ， 然 后 里 
面 的 子 元 素 就 是 弹 杠 主体， 假设 类 名 是 .dialog， 则 HIML 如 下 : 





<div class="container"> 


<div class="dialog"></dialog> 
</div> 





核心 CSS 代 码 如 下 : 





.Container { 
position: fixed; 
top: 6; right: 6; bottom: 6; left: ©; 
background-color: rgba(0,06,0,.5); 
text-align: center; 
font-size: 0; 
white-space: nowrap; 
overflow: auto; 
} 
.Container:after { 
content: ''; 
display: inline-block; 


height: 1662%; 
vertical-align: middle; 
} 
.dialog { 
display: inline-block; 
vertical-align: middle; 
text-align: left; 
font-size: 14px; 
white-space: normal; 








此 时 ， 无 论 浏览 器 尺寸 是 多 大 ， 也 无 论 弹 框 尺寸 是 多 少 ， 我 们 的 弹 
框 永 远 都 是 居中 的 。 眼 见 为 实 ， 手 动 输入 http://demo.cssworld.cn/5/3- 
10.php 或 者 扫 右 侧 的 二 维 码 。 








目前 主流 实现 ， 尤 其 传统 PC 端 页 面 ， 几 乎 都 是 根据 浏览 右 的 尺寸 
和 弹 框 大 小 使 用 JavaScript 精 确 计算 弹 框 的 位 置 。 相 比 传统 的 JavaScript 
定位 ， 这 里 的 方法 优点 非常 明显 。 





(1) 节省 了 很 多 无 谓 的 定位 的 JavaScript 代 码 ， 也 不 需要 浏览 
铬 resize 事 件 之 类 的 处 理 ， 当 弹 框 内 容 动 态 变 化 的 时 候 ， 也 无 须 重 新 
定位 。 








(2) 性 能 更 改 、 演 染 速 度 更 快 ， 毕 葛 浏 览 器 内 置 CSS 的 即时 泻 染 
显然 比 JavaScript 的 处 理 要 更 好 。 


(3) 可 以 非常 灵活 控制 垂直 居中 的 比例 ， 比 方 说 设置 : 


.Container:after { 
height: 962%; 





} 


则 弹 框 不 是 垂直 大 中 对 齐 ， 而 是 近似 上 下 2:3 这 种 感觉 的 对 齐 ， 反 而 会 
让 人 有 视觉 上 居中 的 感觉 


(4) 容 右 设置 overflow:auto 可 以 实现 弹 框 高 度 超过 一 屏 时 依然 
能 看 见 屏幕 外 的 内 容 ， 传 统 实现 方法 则 比较 篮 罚 。 


然后 ， 这 里 的 技巧 还 有 一 个 关键 点 是 半 透 明 黑 色 蒙 层 和 弹 框 元 素 是 
在 一 起 的 父子 关系 。 所 以 ， 上 面 的 示例 代码 中 ， 半 透明 黑色 蒙 层 效果 借 
助 rgba 半 透明 背景 色 实现 ， 对 于 不 支持 rgba 的 正 8 浏 览 器 ， 我 建议 制作 
一 个 例如 10 像 素 x10 像 素 的 同等 效果 的 半 透 明 PNG 图 片 ， 然 后 作为 
base64 URL 地 址 直接 使 用 ， 可 参考 上 面 的 演示 3-10， 或 者 也 可 以 使 用 正 
的 渐变 滤 镜 实现 。 


此 方法 实现 的 原理 关键 就 是 两 个 vertical-align:middle， 前 
面 “ 图 片 近 似 垂直 居中 ”那里 只 网 请 一 个 元 素 vertical-align:middle 
就 实现 了 垂直 居中 ， 原 因 就 是 line-height 大 小 设置 得 恰到好处 ， 但 是 
对 于 弹 框 ， 高 度 不 确定 ， 显 然 不 能 使 用 某 个 具体 的 行 高 值 创建 足够 高 的 
内 联 元 素 。 于 是 ， 这 里 借助 伪 元 素 创 建 了 一 个 和 外 部 容器 一 样 高 的 宽度 
为 6 的 inline- block 元 素 。 有 种 “ 幽 录 空 犁 市 点 ”的 感觉 。 











下 面 是 原理 作用 的 关键 部 分 ， 在 5.3.7 节 讲 过 如 何 分 析 多 个 
vertical-align 的 作用 ， 根 据 定义 专注 当前 元 素 即 可 。vertical- 
align:middle 定 义 是 元 素 的 中 线 和 字符 x 中 心 点 对 齐 。 





(1) 在 本 例 中 ， 由 于 font-size 设 置 为 6， 所 以 x 中 心 点 位 置 就 
是 .container 的 上 边缘 ， 此 时 ， 高 度 166% 的 宽度 为 8 的 伪 元 素 和 这 个 
中 心 点 对 齐 。 如 有 果 中 心 点 位 置 不 动 ， 这 个 伪 元 素 上 面 一 半 的 位 置 应 该 
在 .container 的 外 面 ， 但 是 CSS 中 默认 是 左上 方 排列 对 齐 的 ， 所 以 ， 
伪 元 素 和 这 个 原本 在 容器 上 边缘 的 x 中 心 点 一 起 往 下 移动 了 半 个 容器 高 
度 ， 也 就 是 此 时 x 中 心 点 就 在 容器 的 垂直 中 心 线 上 。 





(2) 弹 框 元 素 .dialog 也 设置 了 vertical-align:middle。 根 据 
定义 ， 弹 框 的 垂直 中 心 位 置 和 x 中 心 点 位 置 对 齐 ， 此 时 ，x 中 心 点 就 在 容 
器 的 垂直 中 心 位 置 ， 于 是 .dialog 元 素 就 和 容器 的 垂直 中 心 位 置 对 齐 
了 ， 从 而 实现 了 垂直 居中 效果 。 





(3) 水 平 居 中 就 text-align:center 实 现 ， 非 常 好 理解 。 





按照 初衷 ， 块 级 元 素 负责 布局 ， 内 联 元 素 设 置 内 容 。 但 是 ， 这 里 的 
弹 框 居中 却 是 把 块 级 元 素 内 联 化 ， 利 用 一 些 内 联 属性 实现 垂直 居中 效 
果 ， 这 也 是 不 得 已 而 为 之 ， 因 为 vertical-align 等 内 联 属性 确实 比 块 
级 属性 强悍 ， 也 正 因为 CSS 世 界 在 布局 上 的 弱势 ， 后 来 多 栏 布 局 、 弹 性 
盒子 布局 以 及 栅 格 布局 一 个 一 个 都 出 来 补 强 了 。 


第 6 草 ” 流 的 破坏 与 保护 


CSS 世 界 中 正常 的 流 内 容 或 者 流 布局 虽然 也 足够 强大 ， 但 是 实现 的 
总 是 方 方 正 正 、 规 规矩 矩 的 效果 ， 有 时 候 我 们 希望 有 一 些 特殊 的 布局 表 
现 ， 例 如 ， 文 字 环 绕 效 果 ， 或 者 元 素 固 定 在 茶 个 位 置 ， 要 实现 这 样 的 效 
果 ， 正 常 的 流 就 有 些 捉襟见肘 。 因 此 ，CSS 中 有 一 类 属性 ， 专 门 通过 破 
坏 正常 的 “ 流 ” 来 实现 一 些 特殊 的 样式 表现 。 当 然 ， 所 谓 生生 相 元 ， 既 然 
有 人 破坏， 束 有 保护 其 他 元 际 不 被 破坏 的 属性 ， 本 章 就 来 介绍 那些 “破坏 
流 ? 和 “保护 流 ” 的 CSS 属 性 。 





6.1 魔鬼 属性 float 


6.1.1 ”float 的 本 质 与 特性 


CSS 世 界 中 的 float 属 性 是 一 个 年 代 非 常 久远 的 属性 。 说 这 人 句 话 是 
什么 意思 呢 ? 有 了 时候 ， 要 了 解 条 一 事物 ， 最 好 先 弄 清楚 其 诞生 的 时 代 背 
景 。 对 于 新 手 CSS 开 友人 员 ， 尤 其 果 面 端 Web 产 品 开 发 人 员 ，float 属 
性 可 以 说 是 用 得 最 频 蚂 的 布局 属性 了 ， 所 以 他 们 很 可 能 会 对 float 属 性 
有 误解 ， 认 为 float 属 性 就 是 为 各 种 块 状 布局 而 设计 的 ， 实 际 上 不 是 
的 。 在 web 诞生 之 初 ， 市 宽 就 那么 一 点 点 ， 我 们 能 够 做 到 的 也 只 是 展示 
文字 以 及 零星 图 片 而 已 ， 怎 么 可 能 浮动 设计 的 目的 就 是 为 了 实现 各 种 砖 
头 式 的 复杂 布局 呢 ? 那个 年 代 复 杂 布 局 都 是 用 <table> 实 现 的 。 既 然 这 
样 ， 那 float 属 性 设计 的 目的 完 竟 是 什么 呢 ? 

















很 简单 ， 一 句 话 : 浮动 的 本 质 就 是 为 了 实现 文字 环绕 效果 。 而 这 种 
文字 环绕 ， 主 要 指 的 就 是 文字 环绕 图 片 显示 的 效果 。 前 文 多 次 提 到 ， 
CSS2 属 性 的 设计 都 是 为 图 文 展示 服务 的 ，float 也 是 如 此 。 上 所以， 大 家 应 
该 也 多 少 对 为 什么 老 下 浏览 器 与 浮动 相关 的 bug 一 火车 都 装 不 下 有 些 了 
解 了 吧 ! 人 家 的 功能 本 来 就 很 单纯 ， 只 是 让 文字 可 以 绕 着 图 片 跑 ， 你 偏 
要 各 种 布局 ， 结 果 撑 不 住 了 吧 ! 





很 显然 ， 从 float 属 性 的 设计 初 囊 来 看 ， 当 下 那些 漫天 飞舞 的 浮动 
属性 完全 就 是 滥用 了 。 








这 其 实 不 难 理解 。 当 你 手中 只 有 一 把 锤子 的 时 候 ， 你 往往 会 把 一 切 


问题 都 看 成 箱子。 浮动 属 性 用 来 布局 非常 符合 现实 世界 的 认 知 ， 什 么 认 


知 呢 ? 就 是 搭 积木 或 者 说 垒 砖头 砌 墙 ， 反 映 在 代码 实现 上 就 是 把 元 素 一 
个 一 个 定 宽 定 高 ， 通 过 浮动 一 个 一 个 堆积 起 来 ， 理 论 上 一 

个 float :left 声 明 几 乎 就 可 以 把 整个 页 面 结 构 都 弄 出 来 (如 图 6-1 所 

示 ) ， 而 且 内 联 元 素 的 间 际 问题 、margin 合 并 问题 都 没有 ， 对 于 新 手 
而 言 ， 不 知道 多 开心 ! 易学 又 好 用 ， 比 “ 流 ” 这 种 玄 玄 平平 的 东西 靠 谱 多 
J 
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图 6-1 全 浮动 属性 搭建 网 页 结构 


乍 一 看 ，float 好 像 也 能 满足 我 们 布局 页 面 的 需求 ， 但 是 实际 上 ， 
这 种 砌 砖头 式 的 布局 方式 就 像 妙 脐 角 ， 一 代 就 碎 ， 主 要 在 于 其 缺少 弹 
性 。 举 个 例子 ， 一 旦 某 个 列表 高 度 变 高 了 ， 则 下 面 的 列表 就 可 能 发 生 不 
愿 看 到 的 布局 错位 ， 抑 或 是 日 后 我 们 需要 增加 茶 个 元 素 的 宽度 ， 则 牵 一 
发 而 动人 全身， 其 他 元 素 也 必须 跟着 调整 ， 否 则 样式 必 乱 ， 也 就 是 说 布局 
的 容错 性 很 糖 糕 。 








如 条 说 得 再 远 一 点， 这 其 实 古 典型 的 “ 刚 与 柔 ? 的 思想 博 奔 。 网 页 布 
局 如 同 我 们 构建 高 楼 大 厦 ， 总 是 需要 应 付 各 种 突 发 状况 ， 所 以 ， 好 的 网 


页 应 该 如 同好 的 建筑 。 传 统 的 楼 房 是 典型 的 * 刚 ? 式 结构 ， 砖 头 加 楼 板 ， 

问题 不 言 而 喻 ， 一 个 小 小 的 地 许可 能 就 被 夷 为 平地 ， 而 好 的 楼 房 应 该 是 
有 “有 ”在 其 中 ， 也 就 是 高 质量 的 钢筋 结构 ， 当 地 宕 导致 房屋 摇 园 的 时 

候 ， 可 以 通过 钢筋 的 “柔性 ” 旬 力 而 保障 整体 结构 的 稳固 。 台 风 认 来 ， 很 
少见 到 说 柔弱 的 柳树 被 吹 倒 ， 反 而 会 经 常 看 到 坚固 的 电线 杆 被 风 吹 倒 的 
消息 ， 道 理 其 实 也 类 似 。 








说 这 么 多 束 是 要 告诉 大 家 : 浮动 是 魔鬼 ， 少 砌 砖头 、 少 浮动 ， 要 更 
多 地 去 挖 据 CSS 世 界 本 里 的 “流动 性 ”和 “ 目 适 应 性 ”， 以 构建 能 够 适用 于 
各 种 环境 的 高 质量 的 网 页 布局 。 





我 们 在 移动 端 开 发 的 时 候 ， 不 可 避免 要 面 对 各 种 设备 尺寸 的 问题 ， 
加 上 横竖 屏 切换 ， 其 可 变 的 外 部 环境 非常 之 多 ， 尤 其 在 初期 ， 很 多 人 有 
这 样 的 想法 : 固定 宽度 320 像 系 ， 然 后 左右 留 白 ;抑或 是 320 像 素 布 局 ， 
然后 根据 比例 缩放 整个 页 面 以 100% 填 满 屏幕 宽度 。 这 些 想法 最 大 的 问 
题 在 于 思维 方式 还 是 “ 刚 * 式 思维 。 记 住 ，CSS 设 计 的 初衷 就 是 表现 如 水 
流 ， 宇 有 弹性 , “砖头 式 思维 ?是 逆 道 而 行 ， 是 绝 不 可 取 的 。 








如 果 进 一 步 深究 ，“ 刚 * 式 思维 的 主要 原因 还 在 于 开发 人 员 对 CSS 的 
了 解 不 够 深入 ， 没 有 能 够 了 解 到 其 表层 属性 之 下 更 深入 的 流动 性 和 自 适 
应 性 。 这 其 实 是 一 个 很 大 的 问题 ， 因 为 虽然 前 端 从 业 人 员 众 多 ， 但 是 仍 
有 很 大 一 部 分 人 不 会 得 到 这 些 深 入 的 知识 和 技能 ， 也 就 很 难 跳出 这 些 固 
定 布局 的 思维 方式 。 好 在 CSS 的 设计 总 是 因 需 求 而 生 ，CSS2 的 设计 是 面 
同 图 文 展示 ，CSS3 的 设计 则 是 为 了 更 绚丽 的 视觉 效果 和 更 丰富 的 网 页 
布局 ， 所 以 ，CSS3 出 现 了 类 似 flex 弹 性 盒子 布局 这 种 更 表层 、 更 上 
层 、 更 浅显 、 更 直 白 的 CSS 属 性 ， 以 另外 一 种 更 加 简单 的 方式 让 大 家 不 











得 不 以 自 适 应 的 方式 去 实现 布局 。 


在 第 3 章 介 绍 width 属性 时 曾 提 到 过 我 总 结 的 一 套 “ 诸 三 无 准则 ” 
即 “ 无 宽度 ， 无 图 片 ， 无 浮动 ”! 之 所 以 要 “无 浮动 ”， 一 个 原因 是 纯 浮动 
布局 容错 性 差 ， 容 易 出 现 比较 严重 的 布局 问题 ， 还 有 一 个 原因 就 
是 float 本 身 就 是 魔鬼 属性 ， 容 易 出 现 意料 之 外 的 情况 ， 这 里 的 意料 之 
外 除了 float 属 性 自身 特性 (如 父 元 素 高 度 塌 陷 )〉 导 致 的 布局 问题 外 ， 
还 包括 诸多 兼容 性 问题 。 千 万 不 要 以 为 只 要 不 用 管 三 6 和 IE7 浏 览 器 就 可 
以 高 枕 无 忧 了 ， 实 际 上 ， 当 下 float 属 性 还 是 存在 一 些 兼 容 性 问题 的 
《6.5 节 中 会 有 演示 ) 。 














如 果 更 进一步 深入 分 析 我 们 融会 发 现 ，float 属 性 的 种 种 归根 结 底 
还 是 由 于 自身 各 种 特性 导致 的 。float 都 有 哪些 有 意思 的 特性 呢 ? 具体 
如 下 : 








。 包 于 性 ; 

。 块 状 化 并 格式 化 上 下 文 ; 
。 破坏 文档 流 ; 

。 没有 任何 margin 合 并 ; 





“ 包 里 性 ”在 3.2.1 节 有 详细 阐述 ， 可 能 很 多 人 都 态 记 了 ， 这 里 再 简单 
提 一 下 。 所 谓 “ 包 庄 性 ”， 由 “ 包 囊 2” 和“* 自 适应 性 ?两 部 分 组 成 。 














(1) 包 里 。 假 设 浮动 元 素 父 元 素 宽 上 度 2886px， 浮 动 元 素 子 元 素 是 
一 个 128px 宽 度 的 图 片 ， 则 此 时 浮动 元 素 宽度 表现 为 “ 包 于 *"， 就 是 里 面 
图 片 的 宽度 128px， 代 码 如 下 : 





.father { width: 2660pxj } 
.float { float: left; } 
.float img { width: 128px; } 
<div class="father"> 


<div class="float"> 
<img src="1.jpg"> 
</div> 
</div> 











(2) 自 适 应 性 。 如 果 浮 动 元 素 的 子 元 素 不 只 是 一 张 128px 宽 上 度 的 
图 片 ， 还 有 一 大 波 普 通 的 文字 ， 例 如 : 


<div class="father"> 
<div class="float"> 
<img src="1.jpg"> 我 是 帅哥 ， 好 巧 啊 ， 我 也 是 帅哥 ， 原 来 看 这 本 书 的 人 都 是 帅哥 
</div> 
</div> 


























则 此 时 浮动 元 素 宽 度 束 目 适应 父 元 素 的 286px 宽 上 度 ， 最 终 的 宽度 表现 也 
是 266px。 








当然 ， 要 想 最 大 宽度 自 适 应 父 元 素 宽 度 ， 一 定 是 在 浮动 元 素 的 * 首 
选 最 小 宽度 ” 比 父 元 素 的 宽度 要 小 的 前 提 下 ， 比 方 说 上 面 示 意 的 “我 是 帅 
哥 ” 等 文字 全 是 一 连 串 超 长 的 英文 字母 ， 则 浮动 元 素 的 宽度 显然 就 不 
是 288px 了。 如 果 还 不 理解 ， 建 议 再 次 深入 3.2 节 的 内 容 ， 这 里 不 再 效 











块 状 化 的 意思 是 ， 元 素 一 旦 float 的 属性 值 不 为 none， 则 
其 display 计 算 值 就 是 block 或 者 table。 举 个 例子 ， 打 开 浏 览 器 控制 
台 ， 输 入 如 下 JavaScript 代 码 : 





var span = document.createElement('span'); 
document .body .appendChild(span); 
console.log('1. ' + Window.getComputedStyle(span).display); 


// 设置 元 素 左 浮动 
span.style.cssFloat = 'left'; 
console.log('2. ' + Window.getComputedStyle(span).display); 





结果 如 图 6-2 所 示 。 


var span = document.createElement('span' ); 


document .body .appendChild(span); 


console.log('1. + Window.getComputedStyle(span).display); 
span.style.cssFloat = "left'; 

console.log('2 + Window.getComputedStyle(span).display); 
1. inline 

2. block 


图 6-2 ”浮动 让 元 素 块 状 化 





因此 ， 没 有 任何 理由 出 现下 面 的 样式 组 合 : 


span { 
display: block;  /* 多 余 
float: left; 

} 





span { 
float: left; 
vertical-align: middle; 


} 











也 不 要 指望 使 用 text-align 属 性 控制 浮动 元 素 的 左右 对 齐 ， 因 
为 text-align 对 块 级 元 素 是 无 效 的 。 


float 属 性 与 display 属 性 值 转换 关系 如 表 6-1 所 示 。 





表 6-1 float 与 display 转 换 关 系 表 








inline-block block 


inline-table 


table-row 


table-row-group 


table-column 


table-column-group 


table-cell 


table-caption 


table-header-group 


table-footer-group 





除了 inline-table 计 算 为 table 外 ， 其 他 全 都 是 plock。 至 于 
float 元 素 的 块 状 格 式 化 上 下 文 特性 ， 参 见 6.3 节 。 


最 后 着 重 讲 一 下 float 特 性 的 精髓 一 一 “破坏 文档 流 ”， 这 可 以 说 
是 float 属 性 的 万 恶 之 源 ， 但 也 是 float 属 性 的 立 命 之 本 ， 是 其 作用 机 
制 之 所 在 。 








6.1.2 float 的 作用 机 制 


float 属 性 有 个 著名 的 特性 表现 ， 惑 是 会 让 父 元 素 的 高 度 塌陷 ， 大 
多 数 场景 下 ， 这 种 特性 会 影响 “正常 的 ”布局 ， 这 里 我 特意 把 “正常 的 ”三 
个 字 加 了 引号 ， 因 为 站 在 CSS 属 性 的 角度 讲 ， 我 们 希望 的 结果 反而 是 一 
种 不 正 帝 ， 高 度 塌陷 才 是 正常 。 甚 至 有 些 人 会 问 这 样 的 问题 : “如何 解 
决 浮动 让 父 元 素 高 度 塌陷 的 bpug? ” 





bug? 别 逗 了 。 一 定 要 明确 这 一 点 ， 浮 动 使 高 度 塌 陷 不 是 pug， 而 是 
标准 ! 有 人 可 能 会 有 疑问 了 : 怎么 会 有 规范 让 人 “ 干 坏事 ”的 ? 











还 记 不 记得 上 面 说 过 的 float 属 性 的 原本 作用 “只 是 为 了 实现 文字 环 
绕 效 果 ”? 所 以 ， 假 如 你 是 CSS 世 界 的 设计 者 ， 你 会 如 何 利 用 古老 的 CSS 
盒 模 型 规则 实现 文字 环绕 效果 ? 


CSS 的 设计 者 束 想 到 了 “破坏 文档 流 ” 这 一 招 ， 具 体 招 式 可 参见 下 面 
的 图 例 讲解 ， 故 事 的 背景 是 这 样 的 ， 我 们 的 男 主 人 公 不 仅 人 长 得 帅 ， 而 
且 心 地 非常 善 民 ， 总 是 去 外 面 给 流浪 的 小 猫 小 狗 喂食 ， 但 是 给 小 动物 喂 
食 非 常 耗费 时 间 ， 影 响 学 业 ， 因 此 主人 公 的 父亲 把 男 主 锁 在 家 里 ， 就 像 
图 6-3 所 示 这 样 ， 一 个 框 把 男 主 人 公 给 限制 住 了 。HTML 结 构 如 下 : 





<div class="father"> 
<img src="me.jpg"> 


</divy> 
<p class="animal"> 小 猫 1， 小 猫 2，. . .</p> 


























但 是 ， 天 天 学 习 谁 也 受 不 了 ， 为 了 摆脱 父 杀 的 限制 ， 男 主 附加 了 大 
鬼 属 性 float， 这 种 属性 的 作用 之 一 就 是 可 以 使 父 元 系 的 高 度 塌陷 “如 
图 6-4 所 示 ) ， 于 是 男 主 就 这 么 摆脱 了 父 杀 的 限制 。 疫 有 了 父 杀 的 限 


制 ， 男 主 就 可 以 和 外 面 的 小 动物 接触 了 ， 如 图 6-5 所 示 。 


从 上 面 的 故事 可 以 看 出 ，float 属 性 让 父 元 素 高 度 塌 陷 的 原因 就 是 
为 了 实现 文字 坏 绕 效 果 。 但 是 ， 后 来 事情 的 发 展 超出 了 CSS 设 计 者 的 意 
料 ， 图 文 展示 只 是 新 时 代 Web 展 示 的 一 小 部 分 ， 而 文字 环绕 这 种 上 世纪 
风格 的 效果 现在 已 然 不 流行 了 ， 于 是 float 很 少 发 挥 其 原本 的 作用 ， 反 
而 被 大 肆 使 用 满 屏 布局 。 显 然 ， 布 局 的 时 候 是 不 需要 父 元 素 塌陷 的 。 于 
是 ， 癌 度 塌陷 这 种 特性 反而 成 为 了 float 属 性 一 个 不 得 不 重视 的 坑 。 


> 
蚌 可 男 去 。 ja 限 和 
u 


小 镁 1 ， 小 猫 2， 小 猫 3 ， 小 猫 4 ， 小 猫 
5 ,小 猫 6， 小 狗 1 ,小 狗 2， 小 狗 3 , 小 
狗 4， 小 狗 5 ,小 狗 6 




















图 6-3 ”故事 的 主要 角色 示意 





float:left; 
ek 父 级 高 度 博 隐 





小 猫 1 ， 小 猫 2， 小 猫 3， 小 猫 4， 小 猫 
5 , 小 猫 6， 小 狗 1 ,小 狗 2， 小 狗 3 ,小 
狗 4， 小 狗 5， 小 狗 6 


图 6-4” 男 主 浮动 ， 父 元 素 高 度 开始 塌陷 


然而 ,，“ 高 度 塌 陷 ” 只 是 让 跟随 的 内 容 可 以 和 浮动 元 素 在 一 个 水 平 线 
上 ,但 这 只 是 实现 “环绕 效果 ”的 条 件 之 一 ， 要 想 实 现 真 正 的 “环绕 效 
朵 ”， 就 需要 男 外 一 个 平时 大 家 不 太 在 意 的 特性 ， 那 就 是 “ 行 框 盒子 和 浮 
动 元 际 的 不 可 重 登 性 ”， 也 就 是 “ 行 框 盒子 如 果 和 浮动 元 素 的 垂直 高 度 有 
重 登 ， 则 行 框 盒 子 在 正常 定位 状态 下 只 会 跟随 浮动 元 素 ， 而 不 会 及 生 重 


























注意 ， 这 里 说 的 是 “ 行 框 盒子 ”， 也 就 是 每 行内 联 元 素 所 在 的 那个 盒 
子 ， 而 非 外 部 的 块 状 盒子 。 实 际 上 ， 由 于 浮动 元 素 的 塌陷 ， 块 状 盒子 是 
和 图 片 完全 重 登 的 ， 例 如 ， 我 们 给 环绕 的 <p> 元 素 设置 个 背景 色 ， 同 时 
把 图 片 搞 透 明 ， 则 效果 如 图 6-6 所 示 。 






路 猎 1， 小 猫 2， 小 猫 3 ,小 猎 
,小 猫 5， 小 猫 6， 小 狗 1 ， 
小 狗 2 ， 小 狗 3 ， 小 狗 4 ， 小 狗 


5 ， 小 狗 6 


图 6-5 ”小 动物 们 环绕 效果 


小 猫 1， 小 猫 2， 小 猫 3 ,小 猫 

4 ,小 猫 5 ,小 猫 6， 小 狗 1 ， 

小 狗 2， 小 狗 3， 小 狗 4 ,小 狗 
3 ,小 狗 6 


图 6-6” 块 元 素 区 域 和 图 片 完全 重 登 








但 是 ， 块 状 盒子 中 的 “ 行 框 盒子 ” 却 被 浮动 元 素 限制 ， 没 有 任何 的 重 
登 ， 我 们 可 以 借助 : :first-1ine 伪 元 素 暴 露 第 一 行 的 “ 行 框 盒子 ”区 
域 ，CSS 代 人 码 如 下 : 





.animal:first-line { 
background: red; 


color: white; 


} 





结果 如 图 6-7 所 示 。 





这 种 “限制 ?是 根深 带 固 的 ， 也 就 是 “ 行 框 盒子 ”的 区 域 永远 惑 这 么 
大 ， 只 要 不 改变 当前 布局 方式 ， 我 们 是 无 法 通过 其 他 CSS 属 性 改变 这 个 











区 域 大 小 的 。 这 就 是 在 4.3 节 提 到 的 浮动 后 面 元 素 margin 负 无 穷 大 依然 
无 效 的 原因 。 例 如 ， 这 里 再 新 增 如 下 CSS 代 码 : 
.animal { 


margin-left: -166px; 
} 








就 会 发 现 ， 只 有 外 部 的 块 状 容 右 盒子 尺寸 变 大 ， 而 和 浮动 元 系 垂 直方 问 
有 和 章 登 的 “ 行 框 盒子 ”依然 被 限 死 在 那里 ， 如 图 6-8 所 示 。 


至 此 ， 浮 动作 用 的 基本 机 制 算是 介绍 完了 。 那 么 了 解 float 属 性 的 
作用 机 制 有 什么 用 呢 ? 很 用， 除了 下 一 市 会 看 重 介 绍 基于 float 属 性 
的 流体 布局 之 外 ， 还 有 很 有 用 的 一 点 就 是 让 我 们 一 下 子 知道 一 些 意料 之 








外 场景 发 生 的 原因 以 及 如 何 快速 对 症 下 药 。 


被 限制 的 行 杠 香 也 









小 葡 1， 小 茶 2 ， 小 狂 3， 小 多 
4 ,小 猫 5， 小 猫 6 ， 小 狗 1 ， 
小 狗 2， 小 狗 3， 小 狗 4 ,小 狗 
5 ,小 狗 6 








图 6-7 第 一 行 背 景 显示 了 行 框 盒子 的 区 域 





NR: 
4 ,小 猫 5 ， 小 猫 6， 小 狗 1 ， 
小 狗 2 ,小 狗 3 ,小 狗 4 ,小 狗 


5 ,小 狗 6 


图 6-8 行 框 人 金子 区 域 固 定 





我 们 不 妨 看 下 面 这 个 很 有 学 习 价值 的 例子 。 很 多 人 会 有 这 样 的 想 
法 ， 就 是 认为 一 个 元 素 只 要 设置 了 具体 的 蜗 度 值 ， 就 不 需要 担心 float 
属性 造成 的 高 度 塌陷 的 问题 了 ， 既 然 有 了 高 度 ， 何 来 “高 度 塌 陷 ?"。 这 人 句 








话 对 不 对 呢 ? 是 对 的 。 但 是 ， 其 中 也 隐 舍 了 陷阱 ， 因 为 “文字 环绕 效 
果 ” 是 由 两 个 特性 〈( 即 “ 父 级 局 度 塌陷 ”和 “ 行 框 盒子 区 域 限 制 *») 共同 作 
用 的 结果 ， 定 高 只 能 解决 “ 父 级 局 度 塌陷 ”市 来 的 影响 ， 但 是 对 “ 行 框 盒 
子 区 域 限 制 * 却 没有 任何 效果 ， 结 末 导 致 的 问题 是 浮动 元 素 垩 直 区 域 一 
旦 超出 高 度 范 围 ， 或 者 下 面 元 素 margin-top 负 值 上 偏 移 ， 就 很 容易 使 
后 面 的 元 素 发 生 “ 环 绕 效 果 ”*”， 代 码 示意 如 下 : 














<div class="father"> 

<div class="float"> 

<img src="zxx.jpg"> 

</div> 

我 是 帅哥 ， 好 巧 啊 ， 我 也 是 帅哥 ， 原 来 看 这 本 书 的 人 都 是 帅哥 ~ 
</div> 
<div> 虽 然 你 很 是 ， 但 是 我 对 你 不 感 兴趣 。</div> 
.father { 














height: 64px; 
border: 1px solid #444; 


.float { 
float:1left; 
} 
.float img { 
width: 66px; height: 64px; 
} 





从 这 段 代 码 可 以 看 出 父 级 元 素 .father 高 度 设置 的 和 图 片 高 度 一 模 
一 样 ， 都 是 64px。 按 道理 ， 下 面 的 “虽然 你 很 帅 ， 但 是 我 对 你 不 感 兴 
趣 。” 这 些 文字 应 该 大 左 显 示 ， 但 最 后 的 结果 却 是 图 6-9 所 示 的 这 样 。 














是 帅哥 ， 好 巧 啊 ， 我 也 是 
帅哥 ， 原 来 看 这 本 书 的 人 都 


是 帅 避 ~ 









理 然 你 很 帅 ， 但 是 我 对 你 个 


被 了 玩 绕 ,了 





图 6-9 ”意料 之 外 的 文字 环绕 效果 


口口声声 说 “不 感 兴趣 ”， 最 后 却 依 旧 环 绕 在 帅哥 图 片 周 围 。 为 什么 
会 出 现 这 种 现象 呢 ? 





里 然 肉 眼看 上 去 容器 和 图 片 一 样品 ， 但 是 ， 大 家 都 读 过 5.3 节 ， 应 
该 都 知道 内 联 状 态 下 的 图 片 底部 是 有 间 际 的 ， 也 就 是 .float 这 个 浮动 
元 素 的 实际 高 度 并 不 是 64px， 而 是 要 比 64px 高 几 像素 ， 市 来 的 问题 就 
古 浮动 元 素 的 局 度 超 出 .father 儿 像素 。 于是， 下 面 的 文字 束 遭 唤 了 ， 
因为 “虽然 你 很 帅 .…...” 这 上 段 文 字 所 在 的 “ 行 框 例子 ”和 浮动 元 素 在 垂直 位 
置 有 了 重 登 ， 尽 管 就 那么 几 像素 。 于 是 ， 区 域 被 限制 ， 形 成 了 图 6-9 所 
示 的 “被 环绕 ?效果 。 

















眼见 为 实 ， 如 果 不 相信 上 面 帅 哥 的 魅力 ， 可 以 手动 输入 
http://demo.cssworld.cn/ 6/1-1.php 或 者 扫 右 侧 的 二 维 码 感受 一 下 。 





因此 ， 当 使 用 浮动 元 素 的 时 候 ， 比 较 稳 妥 的 做 法 还 是 采用 一 些 手段 
干净 地 清除 浮动 带 来 的 影响 ， 以 避免 很 多 意料 之 外 的 样式 问题 的 发 生 。 


6.1.3 ”float 更 深入 的 作用 机 制 





实际 项 目 开发 中 不 可 能 总 是 浮动 元 系 在 正 闻 流 元 素 的 前 面 ， 下 面 来 
看 一 个 例子 。 例 如 ， 有 一 个 标题 ， 代 码 如 下 : 


<h3> 标 题 </h3> 


一 直 用 得 好 好 的 ， 突 然 来 了 一 个 需求 ， 要 在 右 侧 加 一 个 “更 多 ”链接 ， 于 
古 HTML 变 成 下 面 这 样 (我们 这 里 先 忽略 语义 是 否 得 当 的 问题 〉: 


<h3> 标 题 <a href="#"> 更 多 </a></h3> 


请 问 : 我 们 直接 让 <a> 元 素 float:right 可 不 可 以 ? 





考虑 到 本 书 的 目标 浏览 器 是 IE8 及 以 上 版 本 浏览 器 ， 因 此 ， 答 案 
是: 可 以 。 但 是 ， 如 宁 你 的 项 目 很 不 六 还 需要 兼容 了 正 7 之 类 的 浏览 右 ， 
则 不 能 这 样 处 理 ， 因 为 “更 多 ”文字 会 浮动 在 下 一 行内 容 的 右边 ， 而 非 标 
题 的 右边 。 

















以 前 不 少 人 问 我 为 什么 琅 6 和 IE7 浮 动 元素 会 下 一 行 显示 ， 但 却 没有 
人 问 为 什么 正 8 及 以 上 版 本 浏览 器 是 在 一 行 显示 ， 可 见 ， 似 乎 同行 显示 
更 符合 大 家 的 直观 认 知 。 好 在 规范 也 确实 约定 了 浮动 元 素 和 内 联 元 素 在 
行 显示 ， 但 是 ， 如 果 我 问 大 家 具体 的 作用 机 制 是 什么 ， 恐 怕 鲜 有 人 能 


Ai 和 \ 捷 
回答 清楚 ! 














单 徘 感性 认 知 而 非 具 体 原理 理解 CSS 的 样式 表现 很 多 时 候 是 不 靠 谱 
的 。 比 方 说 ， 还 是 这 个 例子 ， 假 设 这 里 的 “标题 ”内容 非常 长 ， 超 过 了 一 
行内 容 ， 请 问 : 这 里 的 “更 多 ”<a> 链 接 元 素 该 如 何 显 示 ? 是 图 6-10 所 示 
的 这 样 吗 ? 答案 是 : 不 是 的 。 正 确 表现 应 该 如 图 6-11 所 示 。 











我 是 一 个 非常 长 足 更 多 
以 换行 的 标题 文字 内 容 


图 6-10 ”假想 浮动 效果 图 


是 一 个 非常 长 足以 换 
行 的 标题 文字 内 容 更 多 


图 6-11 真实 浮动 效果 图 





为 什么 呢 ? 要 想 解释 透彻 ， 那 话 又 多 了 。 首 先 ， 我 们 需要 了 解 两 个 
和 float 相 关 的 术语 ， 一 是 “ 译 动 销 点 ”(float anchor) ， 二 是 “浮动 参 


考 ”(float reference) 。 


。 浮动 锚 点 是 float 元 素 所 在 的 “ 流 ” 中 的 一 个 点 ， 这 个 点 本 身 并 不 浮 
动 ， 就 表现 而 言 更 像 一 个 没有 margin、border 和 padding 的 空 的 
内 联 元 素 。 

。 浮动 参考 指 的 是 浮动 元 素 对 齐 参考 的 实体 。 

















在 CSS 世 界 中 ，f1loat 元 素 的 “浮动 参考 ”是 “ 行 框 盒子 ”， 也 就 
是 float 元 系 在 当前 “ 行 框 盒子 ”内 定位 。 再 强调 一 过 ， 是 “ 行 框 盒子 ”， 
不 是 外 面 的 包含 块 盒子 之 类 的 东西 ， 因 为 CSS 浮 动 设计 的 初衷 仪 仪 是 实 
现 文 字 环 绕 效 果 。 在 CSS 新 世界 中 ，float 被 赋予 了 更 多 的 作用 和 使 
命 ,，“ 浮 动 参考 ”就 不 仅仅 是 “ 行 框 盒子” 了， 不 过 此 非 本 书 重点 ， 束 不 展 
开 了 。 


























正 是 因为 float 定 位 参考 的 是 “ 行 框 合子， 所 以 “更 多 ” 才 会 在 第 二 
行 显示 。 还 没 理解 ? 那 再 具体 解释 一 下 : 每 一 行内 联 元 系 都 有 一 个 “ 行 
框 盒子 ”， 这 个 例子 中 标题 文字 比较 多 ， 两 行 显示 了 ， 因 此 有 上 下 两 











个 “ 行 框 盒子 ”， 而 “更 多 ”所 在 的 <a> 元 素 是 在 标题 文字 后 面 ， 位 于 第 二 
行 ， 因 此 ， 这 里 设置 了 float:right 的 <a> 元 素 是 相对 于 第 二 行 的 “ 行 杠 
盒子 ”对 齐 的 ， 也 就 是 图 6-11 所 示 的 效果 。 
趁 热 打铁 ， 假 如 说 我 们 的 标题 文字 再 多 两 个 字 ， 正 好 两 行 ， 请 

问 : “更 多 ?两 字 又 当 如 何 显示 了 呢 ? 估计 不 少 人 已 经 可 以 脑 补 出 最 终 的 样 
式 表 现 了 ,“ 更 多 ”会 孤零零 地 显示 在 第 三 行 的 右边 ， 但 容器 高 度 仍 然 是 
两 行文 字 的 高 度 ， 如 网 6-12 所 示 。 

是 一 个 非常 长 长 到 足 

以 换行 的 标题 文字 内 容 

更 多 


图 6-12 “更 多 ”显示 在 第 3 行 




















然而 ， 上 面 的 解释 有 一 个 很 大 的 漏洞 就 是 ， 如 果 float 元 素 前 后 全 
是 块 元 素 ， 那 根本 没有 “ 行 框 盒子 ”， 何 来 对 齐 的 说 法 ?此 时 ， 就 需要 上 
面 提 到 的 “浮动 锁 点 ?出 马 了 。 “浮动 销 点 ”这 个 术语 名 称 本 身 很 具有 欺骗 
性 ， 看 上 去 应 该 与 float 的 定位 位 置 有 关 ， 实 际 上 关系 浅薄 ， 在 我 看 
来 ， 其 作用 就 是 产生 “ 行 框 盒 于 ”， 因 为 “浮动 锚 点 ”表现 如 同一 个 空 的 内 
联 元 隶 ， 有 内 联 元 素 目 然 就 有 “ 行 框 例子”， 于 是 ，float 元 素 对 齐 的 参 
考 实体 “ 行 框 盒子 ?对 于 块 状元 素 也 同样 适用 了 ， 只 不 过 这 个 “ 行 框 盒 
子 ” 由 于 没有 任何 内 容 ， 所 以 无 尺寸 ， 看 不 见 也 摸 不 着 图 了 。 
































6.1.4 float 与 流体 布局 


float 通 过 破坏 正常 CSS 流 实现 CSS 环 绕 ， 带 来 了 烦人 的 “高 度 塌 
陷 2” 的 问题 ， 然 而 ， 凡 事 都 具有 两 面 性 ， 只 要 了 解 透彻 ， 说 不 定 就 可 以 


变 废 为 宝 、 化 腐朽 为 神奇 。 例 如 。 我 们 可 以 利用 float 破 坏 CSS 正 常 流 
的 特性 ， 实 现 两 栏 或 多 栏 的 自 适 应 布局 。 


还 记 不 记得 之 前 小 动物 环绕 的 例子 ? 其 实 我 们 稍 加 改造 ， 束 能 变 成 
一 侧 定 宽 的 两 栏 自 适应 布局 ，HITML 和 CSS 代 码 如 下 : 


<div class="father"> 

<img src="me.jpg"> 

<p class="animal"> 小 猫 1， 小 猫 2，. . .</p> 
</div> 
.father { 

overflow: hidden; 

















.father > img { 
width: 66px; height: 64px; 
float: left; 

} 

.animal { 
margin-left: 76pX; 





和 文字 环绕 效果 相 比 ， 区 别 束 在 于 .animal 多 了 一 个 margin- 
left:76px， 也 就 是 所 有 小 动物 都 要 跟 男 主 保持 至 少 76px 的 距离 ， 由 于 
图 片 宽度 就 66epx， 因 此 不 会 发 生 环绕 ， 上 自 适 应 效果 达成 。 











原理 其 实 很 简单 ，.animal 元 素 没 有 浮动 ， 也 没有 设置 宽度 ， 
此 ， 流 动 性 保持 得 很 好 ， 设 置 nargin-left、border-left 或 
者 padding-left 都 可 以 自动 改变 content box 的 尺寸 ， 继 而 实现 了 宽度 
目 适 应 布局 效果 。 








我 们 不 妨 对 比 一 下 环绕 效果 的 背景 区 域 和 这 里 自 适 应 效果 的 背景 区 
域 〈 见 图 6-13) ， 理 解 起 来 应 该 会 更 加 直 白 。 





小 猫 1， 小 猫 2， 小 猫 3 ,小 小 猫 1， 小 猫 2 ,小 猫 3 ,小 

猫 4， 小 猫 3， 小 猫 6， 小 狗 猫 4， 小 猫 5， 小 猫 6， 小 狗 

1 ,小 狗 2， 小 狗 3， 小 狗 4 ， 1 , 小 狗 2， 小 狗 3， 小 狗 
小 狗 9， 小 狗 6 一 4， 小 狗 5， 小 狗 6 





图 6-13 ”环绕 效果 和 自 适 应 效果 背景 区 域 对 比 图 








没有 对 比 束 没有 震撼 。 很 多 人 实现 这 样 的 效果 会 采用 下 面 这样 的 砖 
头 式 的 浮动 布局 : 
.animal { 


width: 176px; 
float: right; 





} 


乍 一 看 ， 效 果 一 样 ， 但 是 实际 上 这 容错 性 和 可 拓展 性 就 差 远 了 。 
旦 我 们 的 容器 宽度 发 生 了 变化 ， 那 么 这 个 布局 就 基本 作废 ， 宽 度 小 了 ， 
两 栏 内容 上 下 错位 ， 宽 度 变 大 ， 中 间 间 际 宽 到 可 以 撑 船 ， 束 是 因为 浮动 

和 宽度 破坏 了 CSS 的 流动 性 。 这 种 感觉 就 像 是 把 记忆 合金 变 成 了 死板 砖 
头 。 在 我 看 来 ， 这 类 布局 是 没有 任何 理由 使 用 这 种 “ 砌 砖头 ? 式 的 技术 方 
案 的 。 一 个 简 简 单单 的 margin-left 岂 不 比 需要 计算 、 代 码 量 多 、 可 维 
护 性 差 的 一 堆 CSS 代 码 好 很 多 ! 

















关于 此 自 适 应 布局 效果 ， 可 以 手动 输入 http://demo.cssworld.cn/6/1- 
2.php 或 者 扫 右 侧 的 二 维 码 感受 一 下 。 














是 可 以 的 ， 例 如 : 


.left { 
float: left; 
width: 58%; 

} 

.right { 
margin-left: 562%; 





如 打 是 多 栏 布局 ， 也 同样 适用 ， 尤 其 图 6-14 所 示 的 这 种 布局 。 





< 上 一 富 第 112 章 动物 环绕 下 - 间 。 








图 6-14 ”中间 内 容 居 中 的 左 中 右 布局 





假设 HTML 结 构 如 下 : 





<div class="box"> 
<a href class="prev">&laquo; 上 一 章 </a> 
<a href class="next"> 下 一 章 &raquo;</a> 
<h3 class="title"> 第 112 章 动物 环绕 </h3> 


</div> 


则 CSS 可 以 如 下 : 


.prev { 

float: left; 
} 
.Next { 

float: right; 


.title { 
margin: 6 76px 
text-align: center; 


} 








也 就 是 说 ，.title 所 在 的 <h3> 标 题 元 系 直 接 左 右 margin， 借 助 流 体 特 
性 ， 保 证 不 会 和 两 个 文字 链接 重 受 。 


6.2 float 的 天 然 克 星 clear 


6.2.1 什么 是 clear 属 性 

生生 相克 ，float 这 个 魔鬼 属性 也 不 例外 。CSS 有 一 个 专门 用 来 处 
理 float 属 性 带 来 的 高 度 塌陷 等 问题 的 属性 ， 这 个 属性 就 是 clear。 其 
语法 如 下 : 


clear: none | left | right | both 


如 果 单 看 字面 意思 ，clear:1left 应 该 是 “清除 左 浮 
动 "””clear:right 应 该 是 “清除 右 浮 动 * 的 意思 ， 实 际 上 ， 这 种 解释 是 
有 问题 的 ， 因 为 浮动 一 直 还 在 ， 并 没有 清除 。 没 错 ， 并 没有 清除 。 








官方 对 clear 属 性 的 解释 是 :“ 元 系 盒子 的 边 不 能 和 前 面 的 浮动 元 素 
相 邻 。” 





虽然 有 些 掏 口 ， 但 是 有 一 点 是 可 以 体会 出 来 的 ， 就 是 设置 了 cleanr 
属性 的 元 素 上 自身 如 何如 何 ， 而 不 是 让 float 元 素 如 何如 何 ， 有 种 “已 所 不 
欲 勿 施 于 人 ”的 意味 在 里 面 。 因 此 ， 我 对 clear 属 性 值 的 理解 是 下 面 这 样 
的 。 








。none: 默认 值 ， 左 右 浮动 来 融 来 。 
。 left: 左 侧 抗 浮动 。 
right: 右 侧 抗 浮动 。 
both: 两 侧 抗 浮动 。 


大 家 有 没有 发 现 ， 我 们 平时 除了 clear:both 这 个 声明 比较 多 以 
外 ，1left 和 right 这 两 个 属性 值 几 乎 无 人 问津 ， 是 因为 left 和 right 这 
两 个 值 没 有 作用 吗 ? 


我 的 答案 非常 直 白 : 没 错 ， 确 实 没 有 什么 用 ! 几 是 clear:1left 或 
者 clear:right 起 作用 的 地 方 ， 一 定 可 以 使 用 clear:both 符 换 ! 


举 个 例子 ， 假 设 容器 宽度 足够 完 ， 有 10 个 <1i> 元 素 ， 设 置 了 如 下 
CSS 代 码 : 


li { 
width: 26px; height: 28px; 
margin: 5px; 
float: left; 


} 
li:nth-of-type(3) { 
clear: both; 





} 





也 就 是 说 ， 第 三 个 <1i> 设 置 了 clear:both， 请 问 表现 是 怎样 的 ? 或 者 
这 么 问 吧 : 列表 最 后 是 1 行 显示 、2 行 显示 ， 还 是 3 行 显 示 呢 ? 


























我 们 很 容易 被 both 这 个 单词 误导 ， 因 为 其 字面 意思 是 “同时 >”， 上 所 以 
很 多 人 会 认为 是 3 行 ， 但 实际 上 只 会 显示 2 行 ， 如 图 6-15 所 示 。 


图 6-15 “列表 2 行 显示 











原因 在 于 ，clear 属 性 是 让 目 身 不 能 和 前 面 的 浮动 元 素 相 邻 ， 注 意 
这 里 “前 面 的 ”3 个 字 ， 也 就 是 clear 属 性 对 “后 面 的 ”浮动 元 素 是 不 闻 不 问 








的 ， 因 此 才 2 行 显示 而 非 3 行 。 


更 进一步 ， 考 虑 到 float 属 性 要 么 就 1eft 要 么 就 right， 不 可 能 后 
时 存在 ， 同 时 由 于 clear 属 性 对 “后 面 的 ”浮动 元 素 不 同 不 问 ， 因 此 ， 
当 clear:left 有 效 的 时 候 ，clear:right 必 定 无 效 ， 也 就 是 此 时 
clear:1left 等 同 于 设置 clear:both; 同样 地 ，clear:right 如 果 有 效 
也 是 等 同 于 设置 clear:both。 由 此 可 见 ，clear:left 和 clear:right 
这 两 个 声明 就 没有 任何 使 用 的 价值 ， 至 少 在 CSS 世 界 中 是 如 此 ， 直 接 使 
用 clear:both 吧 。 








6.2.2 ”成 事 不 足 败 事 有 余 的 clear 

clear 属 性 只 有 块 级 元 素 才 有 效 的 ， 而 : :after 等 伪 元 素 默认 都 是 
内 联 水 平 ， 这 束 是 借助 伪 元 素 清 除 浮动 影响 时 需要 设置 dijsplay 属 性 值 
的 原因 。 


.Clear:after { 
content: ''; 





display: table;  // 也 可 以 是 'block'， 或 者 是 'list-item' 
clear: both; 








} 





然而 ， 利 用 伪 元 素 或 者 直接 使 用 下 面 HTML， 有 时 候 也 会 产生 一 些 意 想 
不 到 的 问题 : 





<div style="clear:both;"></div> 





继续 前 面 那 个 小 动物 环绕 的 例子 ， 如 果 我 们 在 右 侧 目 适 应 内 容 里 面 
使 用 了 类 似 这 样 的 样式 ， 则 可 能 会 发 生 右边 的 内 容 跑 到 图 片 下 边 的 情 
况 ，HTML 代 码 如 下 : 





<div class="father"> 
<img src="me.jpg"> 
<div class="animal"> 
小 猫 1， 小 猫 2， 


<div class="clear"></div> 
小 猫 3， 小 猫 4，. . . 
</div> 
</div> 








结果 却 是 如 图 6-16 所 示 。 眼 见 为 实 ， 手 动 输入 
http://demo.cssworld.cn/6/2-1.php 或 者 扫 下 面 的 二 维 人 码 。 








小 猫 1 ,小 渡 2 ， 











小 猫 3 , 小 猫 4， 小 猫 5 ,小 
猫 6， 小 狗 1 ,小 狗 2， 小 狗 
3 ,小 狗 4 ,小 狗 5， 小 狗 6 











图 6-16 clear:both 导 致 自 适 应 布局 错位 示意 





由 于 clear:both 的 作用 本 质 是 让 自己 不 和 float 元 素 在 一 行 显 
示 ， 并 不 是 真正 意义 上 的 清除 浮动 ， 因 此 float 元 素 一 些 不 好 的 特性 依 
然 存 在 ， 于 是 ， 会 有 类 似 下 面 的 现象 。 














(1) 如 果 clear:both 元 素 前 面 的 元 素 就 是 float 元 素 ， 
则 margin-top 负 值 即使 设 成 -9999px， 也 不 见 任何 效果 。 





(2) clear:both 后 面 的 元 素 依 旧 可 能 会 发 生 文字 环绕 的 现象 。 举 
个 例子 ， 如 下 HTML 和 CSS: 


<div class="father"> 


<img src="zxx.jpg"> 

我 是 帅哥 ， 好 巧 啊 ， 我 也 是 帅哥 ， 原 来 看 这 本 书 的 人 都 是 帅哥 ~ 
</div> 
<div> 虽 然 你 很 帅 ， 但 是 我 对 你 不 感 兴趣 。</div> 
.father:after { 

content: ''; 

display: table; 














clear: both; 
} 
.father img { 
float:1left; 
width: 66px; height: 64px; 


} 
.father + div { 
margin-top: -2px; 


} 





虽然 .father 父 元 素 的 最 后 设置 了 clear:both 来 阻止 浮动 对 后 面 元 素 
的 影响 ， 但 是 最 后 结果 错位 依然 发 生 了 ， 如 图 6-17 所 示 。 





我 是 帅哥 ， 好 巧 啊 ， 我 也 是 





虽然 你 很 帅 ， 但 是 我 对 你 不 


oh 
感 > < 起 。 





图 6-17clear:both 依 然 发 生 布 局 错位 示意 图 


由 此 可 见 ，clear:both 只 能 在 一 定 程度 上 消除 浮动 的 影响 ， 要 想 
完美 地 去 除 序 动 元 素 的 影响 ， 还 需要 使 用 其 他 CSS 声 明 。 那 应 该 使 用 哪 


些 CSS 声 明 呢 ? 请 看 6.3 节 。 


6.3 CSS 世界 的 结 界 一 -BFC 


6.3.1 BFC 的 定义 


BFC 全 称 为 block formatting context， 中 文 为 “ 块 级 格式 化 上 下 文 ”。 
相对 应 的 还 有 IFC， 也 就 是 inline formatting context， 中 文 为 “内 联 格式 化 
上 下 ”。 不 过 IFC 作 用 和 影响 比较 隐 星 ， 我 们 束 不 介绍 了 ， 我 们 将 学 习 重 
点 放 在 BFC 上 。 


关于 BFC 各 种 特性 什么 的 ， 说 起 来 很 喝 唆 ， 而 我 暑 欢 用 “CSS 世 界 的 
结 界 ” 这 种 称谓 概括 BFC 的 特性 。“ 结 界 ” 这 个 词 大 家 应 该 都 理解 的 ， 指 
通过 一 些 特定 的 手段 形成 的 封闭 空间 ， 里 面 的 人 出 不 去 ， 外 面 的 人 进 不 
来 ， 具 有 极 强 的 防御 力 。BFC 的 特性 表现 如 出 一 毗 。 








大 家 请 记 住 下 面 这 个 表现 原则 : 如 果 一 个 元 素 具 有 BFC， 内 部 子 元 
素 再 怎么 翻 江 倒 海 、 翻 云 覆 雨 ， 都 不 会 影响 外 部 的 元 素 。 所 以 ，BFC 元 
素 是 不 可 能 发 生 margin 重 闭 的 ， 因 为 margin 重 闭 是 会 影响 外 面 的 元 素 
的 ;BFC 元素 也 可 以 用 来 清除 浮动 的 影响 ， 因 为 如 果 不 清除 ， 子 元 素 浮 
动 则 父 元 素 高 度 塌陷 ， 必 然 会 影响 后 面 元 素 布局 和 定位 ， 这 显然 有 违 
BFC 元 素 的 子 元 素 不 会 影响 外 部 元 素 的 设 定 。 























那 什 么 时 候 会 触发 BFC 呢 ? 常见 的 情况 如 下 : 


e。 “<htm1> 根 元 素 ; 
。 float 的 值 不 为 none; 
。 overflow 的 值 为 auto、scroll 或 hidden: 


。display 的 值 为 table-cell、table-caption 和 inline-block 中 
的 任何 一 个 ; 
。 position 的 值 不 为 relative 和 static。 


换言之 ， 只 要 元 素 符 合 上 面 任意 一 个 条 件 ， 就 无 有 顷 使 
用 clear:both 属 性 去 清除 浮动 的 影响 了 。 因 此 ， 不 要 见 到 一 个 <divy> 
元 素 就 加 个 类 似 .clearfix 的 类 名 ， 否 则 只 能 暴露 你 屏 弱 的 CSS 基 本 
Us 





6.3.2 BFC 与 流体 布局 


BFC 的 结 界 特性 最 重要 的 用 途 其 实 不 是 去 margin 重 登 或 者 是 清 
除 f1oat 影 响 ， 而 是 实现 更 健壮 、 更 智能 的 自 适 应 布局 。 








我 们 还 是 从 最 基本 的 文字 环绕 效果 说 起 。 还 是 那个 小 动物 环绕 的 例 
子 : 
<div class="father"> 


<img src="me.jpg"> 
<p class="animal"> 小 猫 1， 小 猫 2，. . .</p> 

















</divy> 
img { float: left; } 





效果 如 图 6-18 所 示 。 此 时 .animal 的 内 容 显 然 受 到 了 设置 了 float 
属性 值 的 图 片 的 影响 而 被 环绕 了 。 此 时 如 果 我 们 给 .animal 元 素 设置 具 
有 BFC 特 性 的 属性 ， 如 overflow:hidden， 如 下 : 


.animal { overflow: hidden; } 


则 根据 BFC 的 表现 原则 ， 上 有 具有 BFC 特 性 的 元 素 的 子 元 素 不 会 受 外 部 元 系 











影响 ， 也 不 会 影响 外 部 元 系 。 于 是 ， 这 里 的 .animal 元 素 为 了 不 和 浮动 
元 素 产 生 任 何 交 集 ， 顺 着 浮动 边缘 形成 自己 的 封闭 上 下 文 ， 如 图 6-19 所 
示 《〈 垂 直 虚 线 为 辅助 示意 ) 。 





小 猫 1， 小 猫 2， 小 猫 3， 小 

猫 4， 小 猫 5， 小 猫 6， 小 狗 

1 ,小 狗 2 ,小 狗 3 ,小 狗 4， 
小 移 5， 小 狗 6 








图 6-18 ”文字 环绕 基本 效果 示意 





小 猫 1， 小 猫 2， 小 猫 3 ,小 

猫 4， 小 猫 5， 小 猫 6， 小 狗 

二 ,小 狗 2， 小 狗 3 ,小 狗 4 ， 
浮动 边 各 -= 小 狗 5， 小 狗 6 





图 6-19 ”overflow:hidden 下 的 布局 标注 


也 就 是 说 ， 普 通 流体 元 素 在 设置 了 overflow:hidden 后 ， 会 自动 
填 满 容器 中 除了 浮动 元 素 以 外 的 剩余 空间 ， 形 成 自 适应 布局 效果 ， 而 且 
这 种 自 适 应 布局 要 比 纯 流 体 自 适 应 更 加 智能 。 比 方 说 ， 我 们 让 图 卢 的 尺 
寸 变 小 或 变 大 ， 右 侧 自 适应 内 容 无 须 更 改 任 何 样式 代码 ， 都 可 以 自动 填 
满 剩余 的 空间 。 例 如 ， 我 们 把 图 片 的 宽度 从 66px 改 成 38px， 结 果 如 图 
6-20 所 示 。 

















小 猫 1 ， 小 猫 2， 小 猫 3， 小 猫 4 ， 
小 猫 5， 小 猫 6， 小 狗 1 ,小 狗 2， 
小 狗 3， 小 狗 4， 小 狗 3， 小 狗 6 




















图 6-20 ”浮动 元 素 宽度 变 小 后 内 容 自 动 完美 填充 








实际 项 目 开 发 的 时 候 ， 图 片 和 文字 不 可 能 徘 这 么 近 ， 如 果 想 要 保持 


合适 的 间距 ， 那 也 很 简单 ， 如 采 元 系 是 左 浮 动 ， 则 浮动 元 素 可 以 设 
置 margin-right 成 透明 border-right 或 padding-right; 义 或 者 右 
侧 BFC 元 素 设置 成 透明 border-left 或 者 padding-left， 但 不 包括 
margin-left， 因 为 如 果 想 要 使 用 margin-left， 则 其 值 必须 是 浮动 元 
素 的 宽度 加 间 隐 的 大 小 ， 就 变 成 动态 不 可 控 的 了 ， 无 法 大 规模 复 用 。 因 
此 ， 套 用 上 面 例子 的 HTML， 假 设 我 们 希望 间 际 是 10px， 则 下 面 这 几 种 
写法 都 是 可 以 的 : 


e img { margin-right: 16px; } 

e。 img { border-right: 16px solid transparent; } 

。 img { padding-right: 16px; } 

e .animal { border-left: 16px solid transparent; } 


。 .animal { padding-right: 16px; } 


一 般 而 言 ， 我 喜欢 通过 在 浮动 元 素 上 设置 margin 来 控制 间距 ， 也 
就 是 下 面 的 CSS 代 码 : 


img { 
float: left; 
margin-right: 16px; 


.animal { 
overflow: hidden; 


} 





布局 效果 如 图 6-21 所 示 。 





小 猫 1 ， 小 猫 2 ,小 猫 3 ,小 
猫 4 ， 小 猫 5， 小 猫 6， 小 狗 
1 ,小 狗 2 ,小 狗 3 ,小 狗 
4 ,小 狗 5， 小 狗 6 





图 6-21 设置 合适 间距 后 的 效果 





小 猎 1 ,小 猫 2 ， 















小 猫 3 ,小 猫 4， 小 猫 5 ,小 
猫 6 ， 小 狗 1 ,小 狗 2， 小 狗 
3 ,小 狗 4 ， 小 狗 5 ,小 狗 6 









图 6-22 clear:both 导 致 自 适应 布局 错位 示意 网 





和 基于 纯 流 体 特性 实现 的 两 栏 或 多 栏目 适应 布局 相 比 ， 基 于 BFC 特 
性 的 目 适 应 布局 有 如 下 优点 。 





(1) 自 适 应 内 容 由 于 封闭 而 更 健壮 ， 容 错 性 更 强 。 比 方 说 ， 内 部 
设置 clear:both 不 会 与 float 元 素 相互 干扰 而 导致 错位 ， 也 就 不 会 友 
生 类 似 于 图 6-22 所 示 的 问题 。 











(2) 上 自 适 应 内 容 目 动 填 满 浮动 以 外 区 域 ， 无 须 关 心 浮动 元 素 宽 
度 ， 可 以 整 站 大 规模 应 用 。 比 方 说 ， 抽 象 几 个 通用 的 布局 类 名 ， 如 : 





.left { float: left; } 


.right { float: right; } 
.bfc { overflow: hidden; } 





于 是 ， 只 要 遇 到 两 栏 结构 ， 直 接 使 用 上 面 的 结构 类 名 就 可 以 完成 基 
本 的 布局 。HTML 示 意 如 下 : 


<div class="bfc"> 
<img src="me.jpg" class="left"> 


<p class="bfc"> 小 猫 1， 小 猫 2，.. .</p> 
</div> 











上 面 的 类 名 只 是 示意 ， 有 共 体 可 根据 目 己 项 目的 规范 设 定 ， 甚 至 直接 





用 .1 或 者 .mr 这样 的 极 短命 名 也 是 可 以 的 。 


而 纯 流 体 布 局 需要 大 小 不 确定 的 margin 或 padding 等 值 撑 开 合适 间 
距 ， 无 法 CSS 组 件 化 。 例 如 ， 前 面 出 现 的 78px， 其 他 类 似 布局 可 能 就 
是 98px， 无 法 大 规模 复 用 : 


.animal { margin-left: 76px; } 


两 种 不 同 原理 的 自 适应 布局 策略 的 高 下 一 看 便 知 。 甚 罕 可 以 这 么 
说 ， 有 了 BFC 自 适应 布局 ， 纯 流体 特性 布局 基本 上 没有 了 存在 的 价值 。 
然而 ， 只 是 理论 上 如 此 。 如 果 BFC 自 适应 布局 真 那 么 超 能 ， 那 为 何 并 没 
有 口 口 相 传 呢 ? 


那 我 们 就 得 进一步 深入 理解 了 。 


理论 上 ， 任 何 BFC 元 素 和 float 元 素 相 遇 的 时 候 ， 都 可 以 实现 自动 
填充 的 目 适 应 布局 。 但 是 ， 由 于 绝 大 多 数 的 触发 BFC 的 属性 自身 有 一 些 
古怪 的 特性 ， 所 以 ， 实 际 操 作 的 时 候 ， 能 兼顾 流体 特性 和 BFC 特 性 来 实 
现 无 敌 自 适应 布局 的 属性 并 不 多 。 下 面 我 们 一 个 一 个 来 看 ， 每 个 CSS 属 
性 选 一 个 代表 来 进行 说 明 。 














(1) float:left。 浮 动 元 素 本 身 BFC 化 ， 然 而 浮动 元 素 有 破坏 性 
和 包 囊 性 ， 失 去 了 元 素 本 身 的 流体 自 适 应 性 ， 因 此 ， 无 法 用 来 实现 自动 
填 满 容器 的 自 适 应 布局 。 不 过 ， 其 因 兼 容 性 还 算 良 好 ， 与 搭 积 木 这 种 现 
实 认 知 匹配 ， 上 手 简 单 ， 因 此 在 旧时 代 被 大 肆 使 用 ， 也 就 是 常 说 的 * 浮 
动 布局 ”， 也 算 阴 差 阳 错 地 开创 了 自己 的 一 套 布局 。 








(2) position:absolute。 这 个 脱离 文档 流 有 些 严 重 ， 过 于 清 





高 ， 和 非 定 位 元 素 很 难 玩 到 一 块 儿 去 ， 我 融 不 说 什么 了 。 


(3) overflow:hidden。 这 个 超 棒 ! 不 像 浮动 和 绝对 定位 ， 玩 得 
有 点 儿 过 。 其 本 身 还 是 一 个 很 普通 的 元 素 ， 因 此 ， 块 状元 素 的 流体 特性 
保存 得 相当 完好 ， 附 上 BFC 的 独立 区 域 特 性 ， 可 谓 如 虎 添 辟 、 宇 宙 无 
敌 ! 而 且 overflow:hidden 的 BFC 特 性 从 IE7 浏 览 器 开始 就 支持 ， 兼 容 
性 也 很 不 错 。 唯 一 的 问题 就 是 容器 盒子 外 的 元 素 可 能 会 被 隐藏 掉 ， 一 定 
程度 上 限制 了 这 种 特性 的 大 规模 使 用 。 不 过 ， 溢 出 隐藏 的 交互 场景 比例 
不 算 很 高 ， 所 以 它 还 是 可 以 作为 常用 BFC 布 局 属性 使 用 的 。 

















(4) display:inline-block。 这 是 CSS 世 界 最 伟大 的 声明 之 

一 ， 但 是 用 在 这 里 ， 就 有 些 捉襟见肘 了 。display:inline-block 会 让 
元 素 尺寸 包 里 收缩 ， 完 全 就 不 是 我 们 想 要 的 block 水 平 的 流动 特性 。 只 
能 是 一 声 叹 居 人 铭 弃 挥 ! 然而 ， 峰 回路 转 ， 世 事 难 料 。 大 家 应 该 知道 ， 
IE6 和 IE7 浏 览 器 下 ，block 水 平 的 元 素 设 置 display:inline-block 元 
素 还 是 block 水 平 ， 也 就 是 还 是 会 目 适 应 容 髓 的 可 用 宽度 显示 。 于 是 ， 
对 于 IE6 和 IE7 浏 览 器 ， 我 们 会 阴 差 阳 错 得 到 一 个 比 overflow:hidden 更 
强大 的 声明 ， 既 BFC 特 性 加 喘 ， 又 流体 特性 保留 。 














.float-left { 
float: left; 


} 
.bfc-content { 
display: inline-block; 








当然 ，*zoom:1 也 是 类 似 效 果 ， 不 过 只 适用 于 低级 的 下 浏览 器 ， 如 
IE7。 


(5) display:table-cell。 其 让 元 素 表 现 得 像 单元 格 一 样 ，IE8 
及 以 上 版 本 浏览 器 才 支 持 。 跟 display:inline-block 一 样 ， 它 会 跟随 
内 部 元 素 的 宽度 显示 ， 看 样子 也 是 不 合适 的 命 。 但 是 ， 单 元 格 有 一 个 非 
第 神奇 的 特性 ， 就 是 宽度 值 设 置 得 再 大 ， 实 际 宽度 也 不 会 超过 表格 容器 
的 宽度 。 第 3 章 单 元 格 一 柱 擎 天 的 例子 利用 的 就 是 这 种 特性 ， 如 图 6-23 
所 示 。 








当 父 级 relative , 且 | 当 父 级 relative , 且 
宽度 很 小 的 时 候 ， 例 | 宽度 很 小 的 时 候 ， 例 


如 如 
{position:relative; {position:relative; 
width:20px'} ， width:20px:} ， 
absolute 元 素 也 会 absolute 元 素 也 会 
出 现 一 柱 擎 天 的 情 出 现 一 柱 擎 天 的 情 
见 ; 况 ，; 


加 


图 6-23 ”单元 格 中 的 一 柱 擎 天 效果 


因此 ， 如 果 我 们 把 display :table-cell 这 个 BFC 元 素 宽度 设置 得 
很 大 ， 比 方 说 3669px， 那 其 实 就 跟 block 水 平 元 素 自动 适应 容器 空间 效 
果 一 模 一 样 了 ， 除 非 你 的 容器 宽度 超过 3668px。 实 际 上 ， 一 般 Web 页 面 
不 会 有 3666px 宽 的 模块 ， 所 以 ， 要 是 实在 不 放心 ， 设 个 9999px 好 了 ! 








.float-left { 
float: left; 


} 


.bfc-content { 
display: table-cell; width: 9999px; 
} 








看 上 去 好 像 还 不 错 。 但 是 ， 还 是 有 两 点 制约 ， 一 是 需要 IE8 及 以 上 
版 本 的 浏览 器 ;二 是 应 付 连 续 英 文字 符 换 行 有 些 吃 力 。 但 是 ， 总 体 来 
看 ， 其 适用 的 场景 要 比 overflow:hidden 更 为 广泛 。 


(6) display:table-row。 对 width 无 感 ， 无 法 自 适 应 剩余 容 
宝 | 同 。 


(7) display:table-caption。 此 属性 一 无 是 处 。 


还 有 其 他 声明 对 这 里 的 自 适 应 布局 效 末 而 言 也 都 是 一 无 是 处 ， 束 不 
全 部 展开 了 。 

总 结 一 下 ， 我 们 对 BFC 声 明 家 族 大 致 过 了 一 再 ， 能 担任 自 适应 布局 
重任 的 也 就 是 以 下 几 个 。 


。 overflow:auto/hidden， 适 用 于 IE7 及 以 上 版 本 浏览 器 
。display:inline-block， 适 用 于 IE6 和 IE7; 
。display:table-cel1， 适 用 于 IE8 及 以 上 版 本 浏览 器 


最 后 ， 我 们 可 以 提炼 出 两 套 下 7 及 以 上 版 本 浏览 右 适 配 的 自 适 应 解 
决 方案 。 


(1) 借助 overflow 属 性 ， 如 下 : 


.lbf-content { overflow: hidden; } 


(2) 融合 display:table-cel1 和 display:inline-block， 如 
i 


.lbf-content { 
display: table-cell; width: 9999px; 
/* 如 果 不 需 要 兼容 [IE7， 下 面 样式 可 以 省 略 */ 








*display: inline-block; *width: auto; 














这 两 种 基于 BFC 的 自 适 应 方 采 均 文 持 无 限 散 套 ， 因此， 多 栏目 适应 
可 以 通过 髓 套 方 式 实 现 。 这 两 种 方案 均 有 一 点 不 足 ， 前 者 如 果子 元 素 要 
定位 到 父 元 素 的 外 面 可 能 会 被 隐藏 ， 后 者 无 法 直接 让 连续 英文 字符 换 
行 。 所 以 ， 大 家 可 以 根据 实际 的 项 目 场景 选择 合适 的 技术 方案 。 











最 后 ， 关 于 display:table-cell 元 素 内 连续 英文 字符 无 法 换行 的 
问题 ， 事 实 上 是 可 以 解决 的 ， 就 是 使 用 类 似 下 面 的 CSS 代 码 : 
.word-break { 


display: table; 
width: 1662%; 


table-layout: fixed; 
word-break: break-all; 


} 





6.4 最 佳 结 界 overflow 





要 想 彻 底 清 除 浮动 的 影响 ， 最 适合 的 属性 不 是 clear 而 
是 overflow。 一 般 使 用 overflow:hidden， 利 用 BFC 的 “ 结 界 ” 特 性 彻 
底 解 决 浮动 对 外 部 或 兄弟 元 素 的 影响 。 虽 然 有 很 多 其 他 CSS 声 明 也 能 清 
除 浮动 ， 但 基本 上 都 会 让 元 素 的 宽度 表现 为 “ 包 右 性 *”， 也 就 是 会 影响 原 
来 的 样式 布局 ， 而 overflow:hidden 声 明 不 会 影响 元 素 原先 的 流体 特 
性 或 宽度 表现 ， 因 此 在 我 看 来 是 最 佳 “ 结 界 ”。 














不 过 话 又 说 回来 ，overflow 属 性 原本 的 作用 指定 了 块 容器 元 素 的 
内 容 溢出 时 是 否 需 要 裁剪 ， 也 就 是 “ 结 界 ” 只 是 其 衍生 出 来 的 特性 ,，“ 前 
栽 " 才 是 其 本 职工 作 。 


6.4.1 _ overflow 剪裁 界线 border box 


一 个 设置 了 overflow:hidden 声 明 的 元 素 ， 假 设 同 时 存在 border 
属性 和 padding 属 性 ， 类 似 于 下 面 的 CSS 代 码 : 
.box { 


width: 266px; height: 86px; 
padding: 16pX; 


border: 16px solid; 
overflow: hidden; 











则 当 子 元 了 素 内 容 超 出 容器 宽度 高 度 限制 的 时 候 ， 欧 裁 的 边界 是 border 
box 的 内 边缘 ， 而 非 padding box 的 内 边缘 ， 如 图 6-24 所 示 。 眼 见 为 实 ， 
手动 输入 http://demo.cssworld.cn/6/4-1.php 或 者 扫 下 面 的 二 维 码 。 





图 6-24 “元 素 剪裁 与 border 内 边缘 


如 采 想 实现 元 素 剪 裁 同 时 四 周 留 有 间 隐 的 效果 的 话 ， 可 以 试 试 使 用 
透明 边框 ， 此 时 内 间距 padding 属 性 是 无 能 为 力 的 。 这 里 举 这 个 实例 并 
不 只 是 为 了 传授 这 个 小 技能 ， 也 是 为 了 以 此 为 契机 ， 深 入 探讨 一 
下 overflow 属 性 的 一 个 很 经 典 的 不 兼容 问题 ， 即 Chrome 浏 览 器 下 ， 如 
果 容 器 可 深 动 (假设 是 牌 直 深 动 )， 则 padding-bottom 也 算 在 深 动 尺 
寸 之 内 ，IE 和 Firefox 浏 览 器 忽略 padding-bottom。 例 如 ， 上 面 
的 .box， 我 们 把 overflow 属 性 值 改 成 auto〈 亦 可 点 击 实例 页 面 图 
片 ) ， 滚 动 到 底部 会 发 现 ，Chrome 浏 览 器 下 面 是 有 10 像 素 的 空白 的 ， 
如 图 6-25 所 示 。Firefox 和 了 正 却 没有 ，Firefox 浏 览 器 呈现 的 效果 如 图 6-26 
所 示 。 





图 6-25 “Chrome 浏览 器 滚动 高 度 包 含 padding-bottom 











图 6-26 ”Firefox 浏 览 器 滚动 高 度 不 包含 padding-bottonm 


曾经 有 人 写 邮件 和 我 交流 过 这 个 问题 ， 认 为 Chrome 浏 览 占 | 
是 正确 的 ， 正 和 Firefox 浏 览 器 则 是 不 准确 的 。 在 我 看 来 ，Chrome 浏 览 
的 解析 反而 是 不 准确 的 ， 只 是 Chrome 浏 览 器 的 演 染 表现 是 我 们 开发 所 
需要 的 ， 我 们 就 会 偏心 地 认为 Chrome 是 正确 的 。 但 是 ， 正 如 一 开始 的 
例子 所 展示 的 ，overflow 的 剪裁 或 者 滚动 的 边界 是 border box 的 内 边 
缘 ， 而 非 padding box 的 内 边缘 ， 因 此 ， 和 忽略 padding-bottom 才 是 符合 
解析 规则 的 泻 染 行为 。 





但 是 事 已 至 此 ， 人 争辩 到 底 谁 对 谁 错 其 实 并 没有 多 大 的 意义 ， 重 要 的 
是 我 们 知道 了 这 种 不 兼容 性 ， 所 以 我 们 在 实际 项 目 开发 的 时 候 ， 要 尽量 
避免 滚动 容器 设置 padding-bottom 值 ， 除 了 样式 表现 不 一 致 外 ， 还 会 
导致 scrollHeight 值 不 一 样 ， 这 往往 会 给 开发 带 来 难以 察觉 的 麻烦 ， 
需要 引起 注意 。 


6.4.2 ”了解 overflow-x 和 overflow-y 


自 IE8 以 上 版 本 的 浏览 器 开始 ，overflow 属 性 家 族 增 加 了 两 个 属 
性 ， 束 是 这 里 的 overflow-x 和 overflow-y， 分 别 表示 单独 控制 水 平 或 
垂直 方向 上 的 剪裁 规则 。 


支持 的 属性 值 和 overflow 属 性 一 模 一 样 。 


visible: 默认 值 。 

。hidden: 剪裁 。 

。 scrol1: 滚动 条 区 域 一 直 在 。 

。 auto: 不 足以 滚动 时 没有 滚动 条 ， 可 以 沪 动 时 滚动 条 出 现 。 





这 种 相似 性 很 容易 让 大 家 产生 一 个 误区 ， 认 为 只 要 overflow-x 和 和 
overflow-y 设 置 了 上 面 的 属性 值 ， 束 一 定 会 是 这 样 的 表现 ， 实 际 
上 overflow-x 和 overflow-y 的 表现 规则 要 比 看 上 去 复杂 些 : 如 果 
overflow-x 和 overf1low-y 属 性 中 的 一 个 值 设 置 为 visible 而 另外 一 个 
设置 为 scrol1、auto 或 hidden， 则 visible 的 样式 表现 会 如 同 auto。 
也 就 是 说 ， 除 非 overflow-x 和 overflow-y 的 属性 值 都 是 visible， 否 
则 visib1le 会 当成 auto 来 解析 。 换 名 话说 ， 永 远 不 可 能 实现 一 个 方向 滋 
出 喜 裁 或 深 动 ， 男 一 方 同 内 容 洲 出 显示 的 效果 。 





因此 ， 下 面 CSS 代 码 中 的 overflow-y:auto 是 多 余 的 : 


html { 
overflow-x: hidden; 


overflow-y: auto; /* 多 余 */ 





但 是 ，scroll1、auto 和 hidden 这 3 个 属性 值 是 可 以 共存 的 。 


6.4.3 overflow 与 滚动 条 


HTML 中 有 两 个 标签 是 默认 可 以 产生 滚动 条 的 ， 一 个 是 根 元 系 
<htm1>， 另 一 个 是 文本 域 <textarea>。 之 所 以 可 以 出 现 滚动 条 ， 是 因 
为 这 两 个 标签 默认 的 overflow 属 性 值 不 是 visible， 从 IE8 浏 览 器 开 
始 ， 都 使 用 auto 作 为 默认 的 属性 值 。 这 也 就 意味 着 ， 从 IE8 浏 览 器 开 
始 ， 默 认 状 态 下 是 没有 深 动 栏 的 ， 尺 寸 淤 出 才 会 出 现 ， 对 于 下 7 浏览 
器 ， 其 样式 表现 就 好 像 设 置 了 overflow-y:scroll 一 般 。 








-> 


关于 浏览 器 的 滚动 条 ， 有 以 下 几 个 小 而 美的 结论 。 


(1) 在 PC 端 ， 无 论 是 什么 浏览 器 ， 默 认 深 动 条 均 来 自 <chtml>， 而 
不 是 <body> 标 签 。 验 证 很 简单 ， 新 建 一 个 空白 页 面 ， 此 时 <body> 标 签 
的 默认 margin 值 是 .5em， 如 果 滚 动 条 是 由 <body> 标 签 产 生 的 ， 那 么 效 
果 应 该 如 图 6-27 所 示 这 般 边 缘 留 有 间 隐 。 但 是 最 后 实现 结果 却 是 图 6-28 
所 示 的 这 样 没 有 间 院 。 








图 6-27 “body> 产 生 滚 动 条 的 假想 效果 


图 6-28 ”实际 效果 无 间隙 ， 滚 动 条 由 <htm1> 产 生 





所 以 ， 如 采 我 们 想 要 去 除 页 面 默认 滚动 条 ， 只 需要 : 


html { overflow: hidden; } 


而 没 必要 把 <body> 也 拉 下 水 : 


htm]1 ,beey { overflow: hidden; } 


注意 ， 上 述 规 则 只 对 PC 端 有 效 ， 对 于 移动 端 并 不 一 定 适用 。 例 
如 ， 在 PC 端 ， 对 <htm1> 标 签 设 置 overflow:hidden 可 以 隐藏 滚动 条 禁 
止 滚动 ， 但 是 在 移动 端 基 本 上 无 效 。 在 PC 端 ， 窗 体 滚 动 高 度 可 以 使 
用 document.documentElement.scrollTop 获 取 ， 但 是 在 移动 端 ， 可 
能 就 要 使 用 document .body .scrollTop 获 取 。 




















(2) 滚动 条 会 占用 容器 的 可 用 宽度 或 高 度 。 假 设 一 个 元 素 的 宽度 
是 468px，CSS 代 码 如 下 : 


.box { 
width: 466px; height: 166pX; 


overflow: auto; 


} 





当 子 元 又 高 度 超过 168px 出 现 滚动 条 的 时 候 ， 子 元 素 可 用 的 实际 宽度 实 
际 上 要 小 于 466px， 因 为 滚动 条 〈 准 确 地 说 应 该 是 滚动 栏 ) 占据 了 一 定 
的 宽度 。 当 然 这 还 要 看 操作 系统 ， 比 方 说 在 移动 端 就 不 会 有 这 样 的 问 
题 ， 因 为 移动 端的 屏幕 斥 寸 本 喘 就 有 限 ， 滚 动 条 一 般 都 是 巧 浮 模式 ， 不 
会 占据 可 用 宽度 ， 但 是 在 PC 端 ， 尤 其 Windows 操 作 系 统 下 ， 几 乎 所 有 浏 
览 器 的 滚动 栏 都 会 占据 宽度 ， 而 且 这 个 宽度 大 小 是 固定 的 。 我 通过 在 
Windows 7 系统 下 的 测试 和 对 比 发 现 ，IE7 及 以 上 版 本 正 、Chrome、 
Firefox 浏 览 器 滚动 栏 所 占据 的 宽度 均 是 17px， 注 意 ， 很 精准 的 

征 17px， 我 不 知道 网 上 那些 误 人 子弟 的 26px、14px 古 从 哪里 来 的 。 当 
然 ， 随 着 以 后 操作 系统 的 升级 ， 滚 动 栏 的 宽度 发 生变 化 也 是 有 可 能 的 。 

















要 知道 目 己 浏览 器 的 访 动 栏 宽 度 是 多 少 其 实 很 简单 ， 代 码 如 下 : 


.box { width: 466px; overflow: scroll; } 
<div class="box"> 


<div id="in" class="in"></div> 
</div> 
console.1og(466 - document.getElementById("in").clientWidth); 





这 种 深 动 栏 占据 宽度 的 特性 有 时 候 会 给 我 们 的 布局 融 来 不 小 的 抑 
烦 。 比 方 说 ， 布 局 直接 错位 ， 如 宽度 设 定 死 的 浮动 布局 ; 叉 或 者 布局 不 
对 齐 ， 如 我 们 和 希望 实现 一 个 表格 头 固 定 、 表 格 主体 可 以 滚动 的 效 末 ， 第 
见 的 实现 方法 是 使 用 双 <table>， 表 格 头 是 一 个 独立 的 <table>， 主 体 
也 是 一 个 独立 的 <table> 元 素 ， 放 在 一 个 overflow: auto 的 <div> 元 素 
中 ， 这 种 实现 ， 如 果 滚 动 条 不 出 现 还 好 ， 两 个 表格 的 表格 列 可 以 完美 对 
齐 ， 但 是 一 旦 滚动 条 出 现 ， 主 题 表格 可 用 宽度 被 压缩 ， 表 格 列 往往 就 无 
法 完美 对 齐 了 。 











常用 的 解决 方法 有 下 面 两 种 : 一 种 是 <table> 元 素 使 用 固定 的 宽度 
值 ， 但 是 距离 右 侧 留 有 17px 的 间 除 ， 这 样 即使 滚动 条 出 现 ， 也 不 会 产生 
任何 的 宽度 影响 ， 另 一 种 就 是 表格 的 最 后 一 列 不 设 定 宽度 《文字 最 好 左 
对 齐 ) ， 前 面 每 一 列 都 定 死 宽度 ， 这 样 最 后 一 列 束 是 自 适 应 结构 ， 束 算 
深 动 条 出 现 ， 也 只 是 自身 有 一 些 宽度 变 小 ， 对 整体 对 齐 并 无 多 大 影响 。 

















然而 ， 深 动 栏 占据 宽度 的 特性 最 大 的 问题 就 是 页 面 加 载 的 时 候 水 平 
居中 的 布局 可 能 会 产生 晃 劲 ， 因 为 窗 体 默认 是 没有 滚动 条 的 ， 而 HTML 
内 容 是 自 上 而 下 加 载 的 ， 就 会 发 生 一 开始 没有 滚动 条 ， 后 来 突然 出 现 滚 
动 条 的 情况 ， 此 时 页 面 的 可 用 宽度 发 生变 化 ， 水 平 居 中 重新 计算 ， 导 致 
页 面 发 生 晃 动 ， 这 个 体验 是 非常 不 好 的 。 比 较 简 单 的 做 法 是 设置 如 下 
CSS;: 


html { 
overflow-y: scroll; 
} 


如 果 页 面 注 定 会 很 高 ， 这 种 做 法 也 是 可 以 接受 的 ， 但 是 如 果 是 404 
页 面 这 种 不 足 一 屏 高 度 的 页 面 ， 右 侧 也 依然 有 个 滚动 栏 ， 那 就 有 种 回 到 
解放 前 的 感觉 了 。 








这 里 分 享 一 个 可 以 让 页 面 滚动 条 不 发 生 晃动 的 小 技巧 ， 即 使 用 如 下 
CSS 代 码 : 





html { 

overflow-y: scroll; /* for IE8 */ 
} 
:root { 

overflow-y: auto; 

overflow-x: hidden; 


} 
:root body { 


position: absolute; 
} 
body { 
width: 1606vw; 
overflow: hidden; 


} 








基本 上 药 到 病 除 ， 而 且 后 遗 症 非常 少 ， 大 家 不 妨 试 试 ! 


深 动 条 是 可 以 自 定义 的 。 因 为 下 浏览 费 的 自 定义 效果 实在 是 比 原生 
的 还 要 难看 ， 束 不 浪费 大 家 时 间 了 ， 就 此 打住 。 


倒是 支持 -webkit- 前 级 的 浏览 器 可 以 说 说 。 例 如 ， 对 于 Chrome 浏 
览 嚣 : 


。 整体 部 分 ，: : -webkit-scrollbar:; 

。 两 端 按钮 ，: : -webkit-scrollbar-button; 

。 外 层 轨 道 ，: : -webkit-scrollbar-track:; 

。 内 层 轨 道 ，: : -webkit-scrollbar-track-piece; 
。 滚动 滑 块 ，: : -webkit-scrollbar-thumb; 


e。 边 角 ，: : -webkit-scrollbar-corner。 





但 是 我 们 平时 开发 中 只 用 下 面 3 个 属性 : 


::-webkit-scrollbar { 
width: 8px; height: 8px; 


::-webkit-scrollbar-thumb { /* 拖 动 条 */ 
background-color: rgba(6,6,6,， .3); 
border-radius: 6px; 














::-webkit-scrollbar-track { 
background-color: #ddd; 
border-radius: 6px; 


} 











在 目标 浏览 器 下 的 深 动 条 效果 就 会 如 图 6-29 所 示 这 般 。 





图 6-29 ” 自 定义 深 动 条 效果 示意 


6.4.4 ”依赖 overflow 的 样式 表现 


在 CSS 世 界 中 ， 很 多 属性 要 想 生 效 都 必须 要 有 其 他 CSS 属 性 配合 ， 
其 中 有 一 种 效果 就 离 不 开 overflow:hidden 声 明 ， 即 单行 文字 溢出 点 
点 点 效果 。 虽 然 效 果 的 核心 是 text- overflow:ellipsis， 效 果实 现 
必需 的 3 个 声明 如 下 : 


.ell { 
text-overflow: ellipsis; 


white-space: nowrap; 
overflow: hidden; 


} 





这 3 个 声明 缺 一 不 可 。 


目前 ， 对 -webkit- 私 有 前 级 支持 良好 的 浏览 器 还 可 以 实现 多 行文 
字 打 点 效果 ， 但 是 却 无 须 依赖 overflow:hidden。 比 方 说 ， 最 多 显示 2 
行内 容 ， 再 多 就 打点 的 核心 CSS 代 码 如 下 : 





.ell-rows-2 { 
display: -webkit-box; 


-webkit-box-orient: vertical; 
-webkit-line-clamp: 2; 





6.4.5 overflow 与 销 点 定位 





锚 点 ， 通 俗 点 的 解释 就 是 可 以 让 页 面 定位 到 某 个 位 置 的 点 。 其 在 高 
度 较 高 的 页 面 中 经 常见 到 ， 如 百度 百科 页 面 中 标题 条 目的 快速 定位 效 
果 ， 如 图 6-30 所 示 。 点 击 其 中 任意 一 个 标题 链接 ， 比 如 说 发展 历程 ”， 
页 面 就 会 快速 定位 到 “发 展 历程 ”这 一 块 内 容 ， 同 时 地 址 栏 中 的 URL 地 址 
最 后 多 了 一 个 #1， 如 图 6-31 所 示 。 

















1 发 展 历程 语言 基础 
目录 。 疗程 开发 尾 性 和 尾 性 什 
选择 器 
3 语言 特点 a 
6 语言 标准 


图 6-30 ”百科 中 的 目录 标题 链接 条 目 
€ C |O /item/CSS/545 丰 了 
由 发 展 历程 
图 6-31 ”定位 效果 与 URL 地 址 变化 
我 所 知道 的 基于 URL 地 址 的 锚 链 (如 上 面 的 #1， 可 以 使 
用 location.hash 获 取 ) 实现 锚 点 跳 转 的 方法 有 两 种 ， 一 种 是 <a> 标 签 


以 及 name 属 性 ， 还 有 一 种 就 是 使 用 标签 的 jd 属性。 百度 百科 就 是 使 
用 <a> 标 签 的 name 属 性 实现 销 点 跳 转 的 ， 其 代码 如 图 6-32 所 示 。 





Y<div class="anchor-1ist 
[a name="1"]class lemma-anchor para-title a 
a name="subS5236733_]1"” class="lemma-anchor fa 
a name=" 发 展 历 程 ”class="lemma-anchor /a 
diyv 





图 6-32 ”使 用 <a> 标 签 以 及 name 值 实现 销 点 定位 

















使 用 更 精练 的 代码 表示 就 是 : 


<a href="#1"> 发 展 历 程 ></a> 





<a name="1"></a> 


就 我 个 人 而 言 ， 我 更 喜欢 使 用 下 面 的 做 法 ， 也 就 是 利用 标签 的 id 属 
性 ， 因 为 HTML 会 显得 更 干净 一 些 ， 也 不 存在 任何 兼容 性 问题 : 





<a href="#1"> 发 展 历 程 ></a> 








<h2 id="1"> 发 展 历程 </h2> 





下 面 思考 这 两 个 问题 : 锚 点 定位 行为 是 基于 什么 条 件 触发 的 ? 锚 点 
定位 作用 的 发 生 本 质 上 是 什么 在 起 作用 ? 


1. 销 点 定位 行为 的 触发 条 件 
下 面 两 种 情况 可 以 触发 销 点 定位 行为 的 友 生 : 











(1) URL 地 址 中 的 锚 链 与 锚 点 元 素 对 应 并 有 交互 行为 ; 
(2) 可 focus 的 锚 点 元 素 处 于 focus 状 态 。 


上 面 百度 百科 的 例子 就 是 基于 URL 地 址 的 锚 链 与 锚 点 实现 的 ， 定 位 
效果 的 发 生 需 要 行为 触 帮 。 比 方 说 ， 点 击 一 个 链接 ， 改 变 地 址 栏 的 锚 链 
值 ， 或 者 新 打开 一 个 链接 ， 后 面 帝 有 一 个 锚 链 值 ， 当 然 前 提 是 这 个 锚 链 
值 可 以 找到 页 面 中 对 应 的 元 素 ， 并 且 是 非 隐藏 状态 ， 人 否则 不 会 有 任何 的 
定位 行为 友 生 。 如 果 我 们 的 销 链 就 是 一 个 很 简单 的 #， 则 定位 行为 发 生 
的 时 候 ， 页 面 是 定位 到 顶部 的 ， 所 以 我 们 一 般 实 现 返 回 项 部 效果 都 是 使 
用 这 样 的 HTML: 





<a href="#"> 返 回 顶部 ></ay> 











然后 配合 JavaScript 实 现 一 些 动 效 或 者 避免 点 击 时 候 URL 地 址 出 现 #， 而 
很 多 人 实现 返回 顶部 效果 的 时 候 使 用 的 是 类 似 下 面 的 HTML: 


<a href="javascript:"> 返 回 顶部 ></a> 





然后 使 用 JavaScript 实 现 定位 或 者 加 一 些 平滑 动 效 之 类 。 显 然 我 是 推荐 上 
面 那 种 做 法 的 ， 因 为 镭 点 定位 行为 的 发 生 是 不 需要 依赖 JavaScript 的 ， 所 
以 即使 页 面 JavaScript 代 码 失 效 或 者 加 载 缓慢 ， 也 不 会 影响 正常 的 功能 体 
验 ， 也 就 是 用 户 无 论 在 什么 状态 下 都 能 准确 地 返回 项 部 。 


“focus 销 点 定位 ? 指 的 是 类 似 链接 或 者 按钮 、 输 入 框 等 可 以 被 
focus 的 元 素 在 被 focus 时 发 生 的 页 面 重 定 位 现象 。 

举 个 很 简单 的 例子 ， 在 PC 端 ， 我 们 使 用 Tab 快 速 定 位 可 focus 的 元 
素 的 时 候 ， 如 果 我 们 的 元 素 正 好 在 屏幕 之 外 ， 浏 览 器 就 会 自动 重 定位 ， 


将 这 个 屏幕 之 外 的 元 素 定 位 到 屏幕 之 中 。 再 举 一 个 例子 ， 一 个 可 读 写 的 
<input> 输 入 框 在 屏幕 之 外 ， 则 执行 类 似 下 面 的 JavaScript 代 码 的 时 候 : 


document .querySelector( ' input').focus() 


这 个 输入 框 会 自动 定位 在 屏幕 之 中 ， 这 些 就 是 “focus 锚 点 定位 ”。 


























同样 , “focus 销 点 定位 ?也 不 依赖 于 JavaScript， 是 浏览 器 内 置 的 无 
障碍 访问 行为 ， 并 且 所 有 浏览 器 都 是 如 此 。 





虽然 都 是 锚 点 定位 ， 但 是 这 两 种 定位 方法 的 行为 表现 还 是 有 兰 姑 
的 ，“URL 地 址 销 链 定位 ”是 让 元 素 定 位 在 浏览 器 窗 体 的 上 边缘 ， 





而 “focus 锚 点 定位 ?是 让 元 素 在 浏览 器 窗 体 范 围 内 显示 即 可 ， 不 一 
在 上 边缘 。 


2.， 锚 点 定位 作用 的 本 质 


锚 点 定位 行为 的 有 发生， 本 质 上 是 通过 改变 容 需 访 动 高 度 或 者 宽度 来 
实现 的 。 由 于 平时 大 多 数 页 面部 是 垂直 深 动 ， 且 水 平 深 动 与 之 类 似 ， 
此 接 下 来 的 内 容 我 都 是 以 垂直 滚动 示意 。 








注意 ， 这 里 说 的 是 容器 的 滚动 高 度 ， 而 不 是 浏览 器 的 滚动 高 度 ， 
一 点 小 小 区 分 非常 重要 。 没 错 ， 非 常 重要 。 由 于 我 们 平常 接触 锚 点 a 
都 是 浏览 器 窗 体 滚动 条 级 别 的 ， 因 此 很 容易 被 一 些 表 象 迷 惑 而 产生 一 些 
错误 的 认识 。 


首先 ， 氏 点 定位 也 可 以 发 生 在 普通 的 容器 元 素 上 ， 而 且 定 位 行为 的 
发 生 是 由 内 而 外 的 。 什 么 意思 呢 ? 例 如 ， 我 们 的 页 面 上 有 一 个 <div> 元 
素 设置 了 overflow:auto， 且 子 元 素 高 度 超出 其 自生 高 上 度 限制 ， 代 人 码 示 
意 CSS 和 HTML 如 下 : 





.box { 
height: 126pX; 
border: 1px solid #bbb; 
overflow: auto; 
} 
.Content { 
height: 266pX; 


background-color: #eee; 
} 
<div class="box"> 
<div class="content"></div> 
<h4 id="title"> 底 部 标题 </h4> 
</div> 
<p><a href="#title"> 点 击 测试 </a></p> 





由 于 . content 元 素 高 度 超过 .box 容 器 ， 因 此 <h4> 元 素 必 然 不 可 
见 ， 如 图 6-33 所 示 。 然 后 ， 我 们 点 击 下 面 的 “点 击 测试 链接 ， 则 滚动 条 
位 置 变化 《实际 上 改变 了 scrollTop 值 ) ,“ 底 部 标题 "自动 出 现 了 ， 如 
图 6-34 所 示 。 


点 十 测试 


图 6-33 ”标题 不 可 见 示 意 


底部 标题 
点 十 测试 


图 6-34 ”标题 可 见 示 意 





“由 内 而 外 ” 指 的 是 ， 普 通 元 素 和 窗 体 同时 可 深 动 的 时 候 ， 会 由 内 而 
外 触发 所 有 可 深 动 窗 体 的 铺 点 定位 行为 。 继 续 上 面 的 例子 ， 假 设 我 们 的 
浏览 器 窗 体 也 是 可 深 动 的 ， 则 点 击 “ 扣 击 测试 ”链接 后 ,， “底部 标题 * 先 触 
发 .box 容 器 的 销 扣 定位 ， 也 就 是 深 动 到 底部 ， 然 后 再 触发 窗 体 的 销 反 定 
位 ,，“ 压 部 标题 * 和 浏览 器 窗口 的 上 边缘 对 齐 ， 如 图 6-35 所 示 〈 图 中 最 上 
方 一 条 线 就 是 浏览 器 窗 体 上 边缘 ) 。 








话 部 标题 


占 二 MMW- 





图 6-35 ”标题 可 见 触发 两 个 可 滚动 容器 锚 点 定位 示意 





其 次 就 是 设置 了 overflow:hidden 的 元 素 也 是 可 滚动 的 ， 这 也 是 
本 小 市 的 核心 。 说 得 更 干脆 点 儿 就 是 : overflow:hidden 跟 
overflow:auto 和 overflow: scrol1 的 差别 就 在 于 有 没有 那个 滚动 
条 。 元 素 设置 了 overflow:hidden 声 明 ， 里 面 内 容 高 度 溢出 的 时 候 ， 
滚动 依然 存在 ， 仅 仅 滚 动 条 不 存在 ! 

















有 人 肯定 会 肥 驶 : 不 会 呀 ， 元 素 设 置 了 overflow:hidden， 同 时 
高 度 溢出 ， 我 的 鼠标 无 论 怎 么 滚 ， 都 没有 滚动 行为 发 生 啊 ! 





对 ， 你 说 的 那 是 表现 ， 表 面 看 起 来 确实 是 那样 ， 但 是 如 果 发 生 锚 点 
定位 ， 你 就 会 发 现 滚 动 发 生 了 。 还 是 上 面 的 例子 ， 假 设 .box 元 素 的 CSS 
变 成 下 面 这 样 ，overflow 属 性 值 不 是 auto， 而 是 hidden: 








.box { 
height: 126pX; 


border: 1px solid #bbb; 
overflow: hidden; 





我 们 点 击 下 面 的 “点 击 测试 "链接 时 ， 标 题 同样 发 生 了 重 定 位 ， 如 图 
6-36 上 所 示 。 


底部 标题 
点 十 测 斌 


图 6-36 overflow:hidden 依 然 销 点 重 定 位 





销 点 定位 本 质 上 是 改变 了 scrollTop 或 scrollLeft 值 ， 因 此 ， 上 





面 的 定位 效果 等 同 于 执行 了 下 面 的 JavaScript 代 码 : 























document.querySelector('.box').scrollTop = 266;  // 随便 一 个 足够 大 的 值 即 可 





什么 ? 浏览 器 的 锚 点 定位 实现 了 类 似 JavaScript 的 效 末 ? 那 包 不 是 我 
们 可 以 利用 这 种 兼容 的 浏览 器 行为 实现 更 复杂 的 无 JavaScript 的 交互 效 
果 ? 例如 ， 实 现 选项 卡 切换 效果 ， 手 动 输入 http://demo.cssworld.cn/6/4- 
2.php 或 者 扫 下 面 的 二 维 码 。 这 个 示例 是 基于 URL 地 址 的 销 链 触发 销 点 
定位 实现 的 选项 卡 切换 效果 。 例 如 ， 点 击 切换 按钮 3， 效 果 如 图 6-37 所 
示 





图 6-37 ”选项 卡 3 选 中 效果 





HTML 和 核心 CSS 代 码 如 下 : 


<div class="box"> 
<div class="list" id="one">1</div> 
<div class="list" id="two">2</div> 
<div class="1ist” id="three">3</divy> 
<div class="list" id="four">4</div> 
</divy> 
<div class="link"> 
<a href="#one">1</a> 
<a href="#two" >2</a> 
<a href="#three">3</a> 
<a href="#four">4</a> 
</divy> 
.box { 
height: 16em; 
border: 1px solid #ddd; 
overflow: hidden; 


} 
.list { 
line-height: 16em; 
background: #ddd; 





容器 设置 了 overflow:hidden， 且 每 个 列表 高 度 和 容器 的 高 度 一 
样 高 ， 这 样 保证 永远 只 显示 一 个 列表 。 当 我 们 点 击 按钮 ， 如 第 三 个 按 
钮 ， 会 改变 UREL 地 址 的 锚 链 为 #hree， 从 而 触发 td 为 three 的 第 三 个 列 





表 发 生 的 锚 点 定位 ， 也 就 是 改变 容器 滚动 高 度 让 列表 3 的 上 边缘 和 滚动 
容器 上 边缘 对 齐 ， 从 而 实现 选项 卡 效 果 。 我 自己 画 了 个 简单 的 原理 图 ， 
如 图 6-38 所 示 。 





Qa 被 #three 锚 定 


et 


\ @ 改变 滚动 高 度 
27 触发 锚 点 定位 














图 6-38 ” 锚 点 定位 实现 选项 卡 原理 示意 





此 效果 乍 一 看 很 酷 ， 但 却 有 不 少 不 足 之 处 : 其 一 ， 容 吉 高 度 需 要 回 
定 ; 其 二 ， 也 是 最 抹 烦 的 ， 就 是 “由 内 而 外 ”的 销 扣 定位 会 触发 窗 体 的 重 
定位 ， 也 就 是 说 ， 如 果 页 面 也 是 可 以 深 动 的 ， 则 点 击 选项 卡 按 钮 后 页 面 
会 发 生 跳动 ， 这 种 体验 显然 是 非常 不 好 的 。 那 有 没有 什么 解决 办 法 呢 ? 





有 ， 还 记 不 记得 前 面 提 过 有 两 种 方法 可 以 触发 锚 点 定位 ， 其 中 有 一 
种 方法 就 是 “focus 锚 点 定位 >”， 只 要 定位 的 元 素 在 浏览 器 窗 体 中 ， 就 不 


会 触发 窗 体 的 滚动 ， 也 就 是 选项 卡 切换 的 时 候 页 面 不 会 发 生 中 动 。 


访问 基于 “focus 锚 点 定位 ?实现 的 无 JavaScript 选 项 卡 切换 效果 实例 
页 面 ， 手 动 输入 http://demo.cssworld.cn/6/4-3.php 或 者 扫 下 面 的 二 维 码 。 
点 击 切换 按钮 3， 效 果 如 图 6-39 所 示 。 











图 6-39 ”选项 卡 3 选 中 效果 








可 以 发 现 ， 就 算 页 面 窗 体 就 有 滚动 条 ， 绝 大 多 数 情 况 下 ， 也 都 不 会 
发 生 跳动 现象 ，HTML 和 核心 CSS 代 码 如 下 : 





<div class="box"> 
<div class="list"><input id="one">1</div> 


<div class="list"><input id="two">2</div> 
<div class="list"><input id="three">3</div> 
<div class="list"><input id="four">4</div> 
</div> 
<div class="link"> 
<label class="click" for="one">1</label> 
<label class="click" for="two">2</label> 
<label class="click" for="three">3</label> 
<label class="click" for="four">4¢/1label> 
</div> 
.box { 
height: 16em; 
border: 1px solid #ddd; 
overflow: hidden; 


.list { 
height: 1662%; 
background: #ddd; 
position: relative; 


} 

.list > input { 
position: absolute; top:@; 
height: 166%; width: 1px; 
border:6; padding: 6; margin: ©; 
clip: rect(60 8 9 0); 





原理 其 实 很 简单 ， 就 是 在 每 个 列表 里 塞 入 一 个 肉眼 看 不 见 的 
<input> 输 入 框 ， 然 后 选项 卡 按钮 变 成 Clabe1> 元 素 ， 并 通过 for 属 性 
与 <input> 输 入 框 的 ijd 相 关联， 这 样 ， 点 击 选项 按钮 会 触发 输入 框 的 
focus 行 为 ， 触 发 锚 点 定位 ， 实 现 选项 卡 切换 效果 。 


这 种 原理 实现 的 选项 卡 还 有 一 个 优点 就 是 ， 我 们 可 以 直接 使 用 Tab 
键 来 切换 、 浏 览 各 个 选项 面板 的 内 容 ， 传 统 的 选项 卡 实现 并 没有 如 此 便 
捷 的 可 访问 性 。 








然而 ， 上 和 面 这 种 技术 要 想 用 在 实际 项 目 中 还 离 不 开 JavaScript 的 支 
持 ， 一 个 是 选项 卡 按 钮 的 选中 效果 ， 男 一 个 就 是 处 理 列 表 部 分 区 域 在 浏 


览 句 外面 时 依然 会 跳动 的 问题 。 相 关 处 理 类 似 下 面 的 做 法 ， 即 使 用 
jQuery 语法 ， 


$('label.click').removeAttr('for').on('click', function() { 


$('.box').scrollTop(xxx); 'xxx' 表示 深 动 数值 
}); 





于 是 ， 束 算 JavaScript 出 现 腊 肖 或 者 加 载 缓 慢 ， 选 项 卡 点 击 功 能 依然 
正常 ， 并 且 下 接 用 Tab 键 浏览 选项 卡 内 容 的 超级 便捷 的 可 访问 性 也 保留 
下 来 了 。 综 合 来 看 ， 这 是 非常 不 错 的 一 种 选项 卡 实现 技巧 ， 这 种 技巧 实 
际 上 是 我 自己 私 藏 的 专利 小 技术 ， 这 里 首次 公开 。 





同样 ， 这 一 技术 只 适 用 于 高 度 固 定 的 选项 卡 效 果 ， 如 各 大 站 扣 首 页 
经 党 出 现 的 约 灯 片 广告 切换 效果 等 。 


实际 上 ， 如 果 不 用 考虑 IE8 浏 览 嚣 ， 可 以 利用 :checked 伪 类 、 单 选 
按钮 和 <label> 标 签 的 点 击 行为 实现 选项 卡 切换 ， 由 于 本 书 知识 点 面 问 
IE8 及 以 上 版 本 的 浏览 器 ， 因 此 这 一 技术 不 做 详细 介绍 


知道 overflow:hidden 元 素 依 然 可 以 深 动 ， 除 了 可 以 帮助 我 们 实 
现 无 JavaScript 的 选项 卡 效果 外 ， 还 可 以 帮助 我 们 理解 一 些 现象 发 生 的 原 
因 。 例 如 ， 我 之 前 提 到 过 的 使 用 margin- bottom 负 值 加 padding- 
bottom 正 值 以 及 父 元 素 overflow:hidden 配 合 实现 的 等 高 布局 ， 在 大 
多 数 情况 下 ， 这 种 布局 使 用 是 没有 任何 问题 的 ， 但 是 如 果 使 
用 dom.scrollIntoView( ) 或 者 触发 窗 体 视 区 范围 之 外 的 内 部 元 素 的 销 
点 定位 行为 ， 布 局 就 会 飞 掉 ， 没 错 ， 布 局 就 像 长 了 翅膀 一 样 飞 掉 了 。 
为 ， 此 时 容器 的 scrollHeight( 视 区 高 度 + 可 深 动 高 度 ) 要 远 远 大 于 
clientHeight《〈 视 区 高 度 ) ， 而 销 点 定位 的 本 质 就 是 改变 容器 的 深 动 











高 度 ， 因 此 ， 容 器 的 滚动 高 度 不 是 ge， 发 生 了 与 上 面 无 JavaScript 的 选项 
卡 类 似 的 效果 ， 产 生 布局 问题 。 


就 我 自己 的 切身 体会 而 言 ， 时 刻 牢 记 overflow:hidden 元 素 依 然 
可 以 滚动 这 一 点 ， 可 以 让 我 们 以 更 简单 、 更 原生 的 方式 实现 一 些 交 互 效 
果 。 举 个 例子 ， 实 现 自 定义 的 滚动 条 效果 ， 因 为 Windows 系 统 下 浏览 器 
的 滚动 条 会 占据 宽度 ， 而 且 长 得 不 好 看 ， 所 以 就 存在 实现 自 定义 滚动 条 
的 需求 ， 也 惑 是 类 似 移动 端的 悬浮 式 滚动 条 。 








传统 实现 都 是 父 容器 设置 overflow:hidden， 然 后 子 元 素 使 用 一 
个 大 的 <div> 包 起 来 ， 设 置 绝 对 定位 ， 然 后 通过 改变 top 值 ， 或 者 使 
用 transform 进 行 偏 移 。 








但 是 在 我 看 来 ， 最 推荐 的 实现 还 是 基于 信 Se 
改变 来 实现 自 定义 深 动 条 效果 ， 其 好 处 有 如 下 这 





(1) 实现 人 简单， 无 须 做 边界 判断 。 因 为 就 算 scrollTop 设 
为 -999， 浏 览 器 依然 按照 6 来 演 染 ， 要 想 深 动 到 底部 ， 直 接 一 个 很 大 的 
scrollTop 值 就 可 以 了 ， 无 须 任 何 计算 。 例 如 : 


container.scrollTop = 99999; 


列表 深 动 了 多 少 直 接 就 是 scrol1Top 值 ， 实 时 获取 ， 天 然 存储 。 传 
统 实现 要 变量 以 及 边界 更 新 ， 很 嗓 嗪 。 











(2) 可 与 原生 的 scroll 事 件 天 然 集成 ， 无 颖 对 接 。 例 如 ， 我 们 的 
深 动 延迟 加 载 图 片 效 果 就 可 以 直接 应 用 ， 因 为 图 片 位 置 的 计算 往往 都 是 
和 scrollTop 值 相关 联 的 ， 所 以 传统 实现 scrollTop 值 一 直 是 68， 很 可 








能 导致 这 类 组 件 出 现 异 常 


(3) 无 须 改变 子 元 素 的 结构 。 传 统 实现 为 了 定位 方便 ， 会 给 所有 
的 列表 元 素 外 面包 一 层 独 立 的 <div> 元 素 ， 这 可 能 会 导致 某 些 选择 器 
类似 于 .container > .List{}) 失效 ， 但是， 基于 父 容器 本 身 的 
scrollTop 演 动 实 现 则 无 此 问题 ， 即 使 子 元 素 全 是 兄弟 元 素 也 是 可 以 
的 。 








当然 ， 没 有 哪 种 技术 是 万 能 的 ， 基 于 改变 overflow:hidden 父 容 
CO a i le a A 
似 Bounce 回 弹 这 种 动 效 ， 二 是 演 染 要 比 一 般 的 演 染 慢 一 些 ， 但 大 多 数 
场景 下 用 户 都 是 无 感知 的 。 








大 家 可 根据 目 己 项 目的 实际 情况 目 行 取舍， 选择 合适 的 技术 。 


6.5 “float 的 兄弟 position:absolute 


我 一 直 认 为 position:absolute (下 简称 absolute) 和 
float:left/float: right (下 简称 float) 是 兄弟 关系 ， 都 兼 具 “ 抉 
状 化 “ 包 于 性 ”破坏 性 ”等 特性 ， 不 少 布局 场合 甚至 可 以 相互 蔡 代 。 有 
人 可 能 会 疑惑 : 一 个 属性 名 是 position， 一 个 是 float,“ 姓 ”都 不 一 
样 ， 还 兄弟 呢 ? 





实际 上 是 这 样 的 ，absolute 和 float 可 以 看 作 是 “ 同 父 异 母 ”的 兄弟 
关系 。 它 们 的 父亲 是 同一 个 人 ， 是 CSS 世 界 的 大 魔王 ， 属 于 魔界 ; 但 母 
杀 不 是 一 个 人 ，absolute 的 母亲 来 自 魔 界 ， 而 float 的 母 杀 来 上 自 人 界 。 


但 是 ，absolute 从 不 承认 它 有 一 个 半 魔 半 人 的 兄弟 float， 两 人 是 
水 火 不 容 。 由 于 absolute 和 了 血脉 更 纯 ， 能 力 更 霸道 ， 因 此 ， 当 absolute 
和 float 同 时 存在 的 时 候 ，float 属 性 是 无 任何 效果 的 。 因 此 ， 没 有 任 
何 理由 absolute 和 float 同 时 使 用 : 





.brother { 
position: absolute; 


float: left; // 无 效 
} 





虽然 中 上 不 承认 ， 但 事实 摆 在 那里 ， 毕 葛 有 那么 多 共性 ， 这 兄弟 关 
系 是 跑 不 了 了 。 


例如 , “ 氛 状 化 ”和 浮动 类 似 ， 元 素 一 旦 position 属 性 值 
为 absolute 或 fixed， 其 display 计 算 值 就 是 plock 或 者 table。 例 





如 ，<span> 元 素 默认 是 inline 水 平 ， 但 是 一 旦 设 

置 position:absolute， 其 display 计 算 值 就 变 成 了 block， 我 们 可 以 
使 用 简单 的 JavaScript 代 码 验 证 上 面 的 观点 。 打 开 浏 览 器 控制 台 ， 输 入 如 
下 JavaScript 代 码 : 


var span = document.createElement('span'); 
document .body.appendChild(span); 
console.log('1. ' + Window.getComputedStyle(span).display); 


// 设置 元 素 绝对 定位 
span.style.position = 'absolute'; 
console.log('2. ' + Window.getComputedStyle(span).display); 








执行 后 的 结果 如 图 6-40 所 示 。 


Var Span = pe mh 
document .body .appendChild(span); 

cons Ole .1og! '1, es 

windo Ww. getComputedStyle(s span) .display); 
span. style.pos ition = 'absolute'; 
console.log('2. "+ 
window.getComputedStyle(span).display); 
1. inline 


2. block 
图 6-40 ”绝对 定位 让 元 素 块 状 化 


又 比方 说 “破坏 性 ?， 指 的 是 破坏 正常 的 流 特 性 。 和 float 类 似 ， 虽 
然 absolute 破 坏 正 常 的 流 来 实现 自己 的 特性 表现 ， 但 本 身 还 是 受 普 通 
ne 位 置 甚至 一 些 内 联 相 关 的 CSS 属 性 影响 的 ， 这 部 分 内 
容 会 在 6.5.2 节 介 











又 比方 说 两 者 部 能 “ 块 状 格 式 化 上 下 文 "， 也 就 是 BFC。 


又 比方 说 两 者 都 具有 “ 包 于 性 ”， 也 就 是 尺寸 收缩 包 里 ， 同 时 具有 自 
适应 性 。 有 些 人 知道 display:inline-block 声 明 具 有 “ 包 囊 性 ”， 和 希望 





绝对 定位 元 素 也 如 此 ， 就 有 了 下 面 这 样 的 设置 : 


.wrap { 
display: inline-block; // 没有 必要 








position: absolute; 


} 





实际 上 absolute 天 然 具 有 “ 包 里 性 ”， 因 此 没有 必要 使 
用 display:inline-block， 如 果 要 让 元 素 显 示 或 者 “无 依赖 定位 *”， 可 
以 试 试 更 简短 的 display:inline。 但 是 ， 和 float 或 其 他 “包裹 性 ” 声 
明 带 来 的 “ 自 适 应 性 ” 相 比 ，absolute 有 一 个 平时 不 太 被 人 注意 的 差 
寞 ， 那 就 是 absolute 的 自 适 应 性 最 大 宽度 往往 不 是 由 父 元 素 决 定 的 ， 
本 质 上 说 ， 这 个 差异 是 由 “包含 块 ” 的 差异 决定 的 。 换 句 话 
说 ，absolute 元 素 上 共有 与 众 不 同 的 “包含 块 ”。 

















6.5.1 absolute 的 包含 块 





包含 块 〈containing block) 这 个 概念 实际 上 大 家 一 直 都 有 接触 ， 束 
是 元 素 用 来 计算 和 定位 的 一 个 框 。 比 方 说 ，width:56%， 也 就 是 宽度 一 
半 ， 那 到 底 是 哪个 “元 素 ” 宽 度 的 一 半 呢 ?注意 ， 这 里 的 这 个 “元 素 ” 实 际 
上 就 是 指 的 “包含 块 "”。 有 经 验 的 人 应 该 都 知道 ， 普 通 元 素 的 百分比 宽度 
是 相对 于 父 元 素 的 content box 宽 度 计 算 的 ， 而 绝对 定位 元 素 的 宽度 是 相 
对 于 第 一 个 position 不 为 static 的 祖先 元 素 计 算 的 。 实 际 上 ， 大 家 已 
经 和 “包含 块 ? 打 过 交道 了 ， 对 于 这 些 计 算 规 则 ， 规 范 是 有 明确 定义 的 ， 
具体 如 下 《剔除 了 不 常用 的 部 分 内 容 ) 。 














(1) 根 元 素 〈 很 多 场景 下 可 以 看 成 是 <htm1>) 被 称 为 “初始 包含 
块 ?， 其 矿 寸 等 同 于 浏览 右 可 视窗 口 的 大 小 。 





(2) 对 于 其 他 元 素 ， 如 果 该 元 素 的 position 是 relative 或 
者 static， 则 “包含 块 ? 由 其 最 近 的 块 容器 祖先 盒 的 content box 边 界 形 
成 。 

(3) 如 果 元 素 position:fixed， 则 “包含 块 ? 是 “初始 包含 块 ”。 


(4) 如 果 元 素 position:absolute， 则 “包含 块 ” 由 最 近 的 
position 不 为 static 的 祖先 元 素 建 立 ， 具 体 方式 如 下 。 








如 果 该 祖先 元 素 是 纯 inline 元 素 ， 则 规则 略 复杂 : 


假设 给 内 联 元 素 的 前 后 各 生成 一 个 宽度 为 0 的 内 联 盒子 (inline 
box) ， 则 这 两 个 内 联 盒子 的 padding box 外 面 的 包围 盒 就 是 内 联 元 
素 的 “包含 块 ”; 

如 果 该 内 联 元 素 补 跨行 分 割 了 ， 那 么 “包含 块 "是 未 定义 的 ， 也 就 是 
CSS2.1 规 范 并 没有 明确 定义 ， 浏 览 器 目 行 太 挥 。 


否则 ,“ 包 含 块 ”由 该 祖先 的 padding box 边 界 形成 。 
如 果 没 有 符合 条 件 的 祖先 元 素 ， 则 “包含 块 ”" 是 “初始 包含 块 ”。 


可 以 看 到 ， 和 常规 元 素 相 比 ，absolute 绝 对 定位 元 素 的 “包含 
块 " 有 以 下 3 个 明显 差异 : 


(1) 内 联 元 素 也 可 以 作为 “包含 块 ”所 在 的 元 素 ; 





402) “包含 块 ? 所 在 的 元 素 不 是 父 块 级 元 素 ， 而 是 最 近 的 position 
不 为 static 的 祖先 元 素 或 根 元 素 ; 








(3) 边界 是 padding box 而 不 是 content box。 


首先 讲 第 一 点 差异 ， 也 就 是 内 联 元 妹 可 以 作为 "包含 块 ”。 这 一 点 个 
计 很 多 人 都 不 知道 ， 因 为 平时 使 用 得 少 。 为 何平 时 用 得 少 ? 原因 如 下 。 





(1) 我 们 一 旦 使 用 absolute 绝 对 定位 ， 基 本 上 都 是 用 来 布局 ， 而 
内 联 元 素 主 要 的 作用 是 图 文 展示 ， 上 所谓 道 不 同 不 相 为 谋 ， 因 此 两 者 很 难 
凑 到 一 块 儿 。 


(2) 理解 和 学 习 成 本 比较 高 。 内 联 元 系 的 “包含 块 不 能 按照 常规 
块 级 元 素 的 “包含 块 ”来 理解 。 举 个 例子 ， 如 下 HTML 代 码 : 


<Span style="position:relative;"> 
我 是 <big style="font-size:266%;"> 字 号 很 大 </big> 的 文字 ! 








</span> 


其 效果 如 图 6-41 所 示 。 请 问 : 此 时 <span> 元 素 的 “包含 块 ”范围 是 什么 ? 


如 果 对 定义 理解 不 够 ， 很 容易 误 认 为 包含 块 的 上 下 边缘 被 其 中 “ 字 
号 很 大 ”的 <big> 元 系 给 撑 大 了 。 实 际 上 ， 此 时 元 素 的 “包含 块 学 转 
与 <big> 元 素 坚 无 和 天 系 ， 惑 算 其 字号 大 小 设置 得 再 大 , “包含 其 ? 范 围 依 
然 是 图 6-42 虚 线 所 示 的 那么 大 。 原 因 很 简单 ， 内 联 元 素 的 “包含 块 " 是 
由 “生成 的 ?前 后 内 联 盒子 决定 的 ， 与 里 面 的 内 联 盒子 细节 没有 任何 天 
系 。 


5 字号 很 大 sx=， 


图 6-41 简单 的 文字 呈现 效果 


图 6-42 ”实际 的 “包含 块 " 范 围 大 小 


我 根据 自己 的 进一步 测试 发 现 ， 内 联 元 素 的 “包含 块 ” 可 以 
受 ::first-1ine 伪 元 素 影响 ， 但 不 受 : :first-1Letter 伪 元 素 影 啊 。 


可 以 看 出 ， 内 联 元 素 的 “包含 块 ? 范 围 相 对 稳固 ， 不 会 受 1ine- 
height 等 属性 影响 ， 因 此 ， 理 论 上 其 还 是 有 实用 价值 的 。 





(3) 兼容 性 问题 。 无 论 内 联 元 素 是 单行 还 是 路 行 都 存在 兼容 性 问 
题 。 单 行 的 兼容 性 问题 存在 于 “包含 块 " 是 一 个 空 的 内 联 元 素 的 时 候 。 例 
如 ， 按 照 我们 的 理解 ， 下 面 的 代码 实现 的 效果 应 该 是 图 片 在 容器 的 右上 
角 对 齐 : 








<p> 
<span> 
<img src="1.jpg"> 
</span> 
</p> 


p { text-align: right; } 
p > span { position: relative; } 
p > span > img { 

position: absolute; 

right: ©; 


} 








但 是 根据 我 的 测试 ， 在 正 8 至 IE10 浏 览 器 下 ， 图 片 完 全 在 <p> 容 器 的 
左 侧 外 部 显示 了 ，IE Edge 中 则 无 此 问题 。 需 要 给 空 的 <span> 元 素 设 
置 border 或 padding 让 “幽灵 空白 节点 ”显现 或 者 直接 搬入 字符 才能 表现 
一 致 。 








跨行 的 兼容 性 问题 在 于 规范 对 此 行为 并 未 定义 ， 导 致 浏览 器 在 实现 
上 各 有 差异 。 主 要 差异 在 于 ，Firefox 浏 览 器 的 “包含 块 ” 仅 覆盖 第 一 行 ， 
而 卫 和 Chrome 浏 览 器 “包含 块 ” 的 表现 完全 符合 定义 ， 由 第 一 行 开头 和 最 
后 一 行 结尾 的 内 联 盒 子 共同 决定 。 差 寞 如 图 6-43 所 示 。 


度 杠 是 “包含 块 ” 


BE 字号 很 大 呈 sH 





我 是 第 二 行内 容 。 FUrefox 规 国 
ss mm A mm 

关子 号 和 民 大 sx= I 

我 是 第 二 行内 容 。; Cyroww 稚 图 


图 6-43 ”Firefox 和 Chrome 跨 行内 联 元 素 “ 包 含 块 ” 对 比 


个 人 认为 ， 琅 (包括 IE8) 和 Chrome 浏 览 器 的 泻 染 规则 是 更 准确 
的 ， 但 这 种 渔 染 可 能 会 带 来 为 外 一 个 疑惑 :如果 内 联 元 素 最 后 一 个 内 联 
盒子 的 右边 缘 比 第 一 个 内 联 盒子 的 左边 缘 还 要 靠 左 ， 那 岂 不 是 “包含 
块 ? 宽 度 要 为 员 了 ? 眼见 为 实 ， 例 如 ， 我 们 修改 一 人 HIML， 让 “包含 
块 ”" 从 后 面 的 文字 开始 算 起 : 


我 是 <big style="font-size:266%;"> 字 号 很 大 </big> 


目 生气 











<span style="position:relative;"> 的 文字 ! 我 是 第 二 行内 容 。</span> 





结果 “包含 块 ” 的 宽度 按照 8 来 处 理 了 ， 起 始 位 置 为 第 一 个 内 联 盒子 所 在 
的 位 置 ， 如 图 6-44 所 示 。 


em / 
生字 号 很 大 xs， 
我 是 第 二 行内 容 。 








图 6-44 “包含 块 ”表现 为 宽度 6 示意 








然后 讲 第 二 点 差异 ， 也 就 是 绝对 定位 元 素 计算 的 容器 是 第 一 
个 position 不 为 static 的 祖先 元 素 。 这 个 很 多 人 知道 ， 因 为 平时 
left、top 定 位 用 得 很 频繁 ， 用 着 用 着 就 知道 了 百分比 宽度 、 高 度 以 及 
定位 什么 的 和 普通 元 素 不 一 样 。 这 也 衍生 出 了 另外 一 个 有 意思 的 小 问 
题 ， 就 是 height:166% 和 height:inherit 的 区 别 。 对 于 普通 元 素 ， 两 
者 确实 没什么 区 别 ， 但 是 对 于 绝对 定位 元 素 就 不 一 样 了 。height:166% 
是 第 一 个 具有 定位 属性 值 的 祖先 元 素 的 高 度 ， 而 height:inherit 则 是 
单纯 的 父 元 素 的 高 度 继 承 ， 在 某 些 场景 下 非常 好 用 。 














然后 就 是 很 多 人 并 没有 注意 到 的 ， 也 是 本 节 的 重点 内 容 ， 那 就 是 绝 
对 定位 元 素 的 “ 包 衷 性 ?中 的 “宽度 自 适 应 性 ?其 实 也 是 相对 于 “包含 块 " 来 
表现 的 。 


我 们 先 从 一 个 简单 的 例子 说 起 ， 代 码 如 下 : 


.box { position: absolute; } 


<div class="box" > 文字 内 容 </boxy> 








请 问 : .box 元 素 的 宽度 是 多 少 ? 文字 会 换行 吗 ? 如 宁 .box 元 素 中 
有 满 满 1666 个 汉字 ， 文 字 会 换行 吗 ? 如 果 换 行 ， 在 哪里 换行 ? 


很 饮 单 的 例子 ， 很 简单 的 问题 ， 但 是 能 够 准确 地 回答 清楚 的 人 您 怕 
并 不 多 。 








在 通常 场景 下 ，.box 元 素 宽度 就 是 里 面 文字 的 宽度 ， 不 会 换行 ， 随 
着 文字 越 来 越 多 ， 如 果 文字 足够 多 ，. box 元 素 宽 度 会 越 来 越 大 ， 但 是 不 
会 无 限制 大 下 去 ， 因 为 超过 一 定 限制 是 会 自动 换行 的 ， 而 这 个 限制 就 
是 .box 元素 的 “包含 块 ”。 























注意 这 里 的 几 个 措辞 ， 第 一 个 是 “通常 场景 下 "”， 第 二 个 是 “会 自动 
换行 ">。“ 会 自动 换行 ”说 的 就 是 “ 包 于 性 ”中 的 “宽度 自 适 应 性 ”"。 举 个 简单 
的 例子 ， 假 设 .box 元 素 有 一 个 宽度 286px 同 时 position 为 relative 的 
容器 元 素 ，CSS 代 码 如 下 : 





.Container { 
width: 266px; 
border: 1px solid; 
position: relative; 


.box { position: absolute; } 








同时 .box 元 素 里 面 的 文字 内 容 非 常 多 ， 此 时 ，. box 元 素 的 “包含 块 ”就 
是 .container 元 素 ， 因 此 ，.box 元 素 最 终 的 宽度 就 是 2886px〈 见 图 6- 
45) ， 也 就 是 说 ， 绝 对 定位 元 素 默 认 的 最 大 宽度 就 是 "包含 块 ” 的 宽度 。 





.container 高 度 塌陷 是 因为 absolute 破 坏 了 正常 的 CSS 流 ， 此 
乃 “ 破 坏 性 ”， 宽度 被 relative 限 制 在 最 大 28688px， 此 乃 “ 包 里 性 ”， 
此 ， 对 于 弹 框 这 种 绝对 定位 或 固定 定位 的 元 素 是 没有 必要 设置 max- 
width:166% 的 : 











dialog { 
position: absolute; 


max-width: 166%; /* 多 余 */ 


} 











而 “通常 场景 下 ”说 的 是 ， 有 可 能 我 们 的 “包含 块 ”( 或 者 “包含 块 ” 和 猎 
余 的 空间 〉 小 到 不 足以 放下 “文字 内 容 * 这 4 个 汉字 。 于 是 ， 一些“ 怪 
异 ” 的 现象 就 很 好 理解 了 ， 比 方 说 纯 CSS 定 位 或 JavaScript 计 算 定 位 实现 
的 提示 效果 一 柱 擎 天 的 问题 。 


先 看 CSS 实 现 ， 演 示 地 址 为 http:/demo.cssworld.cn/6/5-1.php。 我 们 
的 目标 效果 是 鼠标 hover 图 标 出 现 类 似 于 如 图 6-46 所 示 的 效果 。 


文字 内 容 。 当 绝对 定位 元 素 没有 
ni 
RR “ 包 合 





‘| 200*x76 





图 6-45“ 包 事 性 ”与 “包含 块 ” 
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图 6-46 ”计划 实现 的 提示 效果 


我 们 可 以 利用 : :before 和 : :after 伪 元 素 实现 我 们 想 要 的 效果 ， 

一 个 实现 三 角 ， 一 个 实现 矩形 区 。 为 了 不 干扰 布局 ， 显 然 实现 提示 效果 
的 两 个 伪 元 素 会 使 用 absolute 绝 对 定位 ， 为 了 定位 准确 ， 我 们 会 给 小 
图 标 元 素 设 置 position:relative。 此 时 问题 来 了 : 由 于 提示 信息 的 
内 容 有 长 有 短 ， 我 们 不 可 能 给 提示 元 素 设置 一 个 特定 的 宽度 ， 于 是 宽度 
表现 走 “ 包 里 性 ”"， 也 就 是 最 大 宽度 不 超过 “包含 块 ” 的 宽度 ， 但 是 恰好 此 
时 “包含 块 ”就 是 我 们 的 小 图 标 元 素 ， 并 且 宽 度 往往 都 不 超过 20 像 素 ， 也 
就 是 我 们 的 提示 信息 只 能 够 在 20 像 素 宽 的 区 域内 显示 ， 这 就 导致 了 最 终 
的 文字 扩容 “一 柱 擎 天 ”， 如 图 6-47 所 示 。 














要 修复 这 一 问题 其 实 很 简单 ， 只 要 改变 默认 的 宽度 显示 类 型 就 可 
以 ， 添 加 white-space: nowrap， 让 宽度 表现 从 “ 包 庄 性 ” 变 成 最 大 可 
用 宽度 ”， 点 击 演示 页 面 的 删除 图 标 可 看 到 修复 “一 柱 擎 天 ”问题 后 的 效 





果 。 


绝对 定位 元 素 “ 包 于 性 ”的 “包含 块 ”限制 不 仅 出 现 sh 
候 ， 有 时 候 就 算 * 包 含 块 ” 的 宽度 足够 大 ， 也 依然 会 出 现 “ 一 柱 擎 天 ”。 旧 
见 为 实 ， 还 是 提示 信息 效果 ， 不 过 这 次 我 们 使 用 JavaScript 实 现 ，! 

示 条 相关 的 HTML 内 容 直 接 插入 <body> 标 签 中 ， 此 时 “包含 块 的 宽度 就 
是 浏览 器 窗 体 的 宽度 ， 投 道理 讲 ， 是 不 会 出 现 “ 一 柱 擎 天 ?效果 的 ， 但 是 
人 算 不 如 天 算 ， 不 该 发 生 的 还 是 发 生 了 ! 








演示 地 址 为 http:/demo.cssworld.cn/6/5-2.php。 当 我 们 的 小 图 标 在 浏 
唤 器 窗 体 靠近 右 侧 边缘 的 时 候 ，“ 一 柱 擎 天 ”的 翡 剧 同样 发 生 了 ， 如 图 6- 


48 所 示 。 


图 6-47 被 “包含 块 * 限 制 的 一 柱 擎 天 效果 (CSS 版 ) 


i 


图 6-48 ”被 “包含 块 ” 限 制 的 一 柱 敬 天 效果 (JavaScript 版 ) 





原因 不 难 理解 。 虽 然 说 黑色 的 提示 元 素 的 “包含 块 ?宽度 是 整个 浏览 
器 窗 体 宽度 ， 放 几 个 文字 绰绰有余 ， 但 是 ， 由 于 我 们 的 图 标 位 于 浏览 圳 
的 右边 缘 ，JavaScript 定 位 的 时 候 ， 就 会 设置 一 个 很 大 的 left 属 性 值 ， 
导致 "包含 块 ?剩余 的 空间 不 足 ， 也 束 是 提示 元 素 的 “ 自 适 应 宽度 ”不足 ， 








导致 文字 只 能 竖 着 显示 ， 从 而 出 现 “ 一 柱 擎 天 ”。 


要 修复 此 问题 其 实 很 简单 ， 只 要 改变 默认 的 宽度 显示 类 型 就 可 以 ， 
添加 white-space: nowrap， 让 宽度 表现 从 “* 包 右 性 ” 变 成 < 最 大 可 用 帘 
度 ”， 点 击 演示 页 面 的 删除 图 标 可 看 到 修复 “一 柱 擎 天 ”问题 后 的 效果 。 
当然 ， 实 际 开发 的 时 候 ， 最 好 改变 提示 的 方向 ， 例 如 右边 缘 的 时 候 ， 磊 
侧 提 示 。 











最 后 讲 第 三 点 差异 ， 也 就 是 计算 和 定位 是 相对 于 祖先 定位 元 素 的 
padding box。 为 何 绝对 定位 的 定位 要 相对 于 padding box 呢 ?这 其 实 和 
overflow 隐 藏 也 是 padding box 边 界 类 似 ， 都 是 由 使 用 场景 决定 的 。 





举 个 例子 ， 在 移动 首 ， 为 了 实现 良好 的 视觉 感受 ， 列 表 或 者 模块 的 
言 恩 内 容 主 体 距离 窗 体 两 侧 都 有 一 定 的 空白 ， 这 个 空 晶 一般 都 会 使 
用 padding 撑 开 的 ， 而 不 是 margin， 原 因 在 于 这 些 列表 是 链接 ， 外 部 一 
定 会 使 用 <a> 元 素 ， 而 为 了 准确 反馈 啊 应 区 域 ，<a> 元 系 在 tap 的 时 候 会 
由 加 深 的 背景 块 示意 (参见 微 信 列表 tap 时 候 的 反馈 ) ， 所 以 ， 如 果 左 
右 的 间距 使 用 margin 撑 开 ， 就 会 出 现 列表 的 点 击 反 馈 背 景区 域 左右 边 
距 透 明 的 问题 ， 视 觉 效 果 和 体验 都 是 不 好 的 ， 因 为 margin box 永 远 是 透 
明 的 。 




















现在 来 需求 了 : 需要 在 列表 或 者 模块 的 右上 角 显 示 一 个 明显 的 标 
签 ， 如 “精华 ”“ 星 冠 ? 之 类 。 此 时 ， 我 们 无 须 任何 计算 ， 直 接 使 用 数值 8 
定位 在 列表 的 右上 角 即 可 ， 代 码 示 意 如 下 : 


.list { 
padding: 1rem; 
} 


.tag { 
position: absolute; 
top: 8; right: 6; 





但 是 ， 如 果 我 们 的 定位 是 相对 于 content box 计 算 的 ， 则 CSS 代 码 应 该 类 
似 这 样 : 


.list { 
padding: 1rem; 


.tag { 
position: absolute; 
top: lrem; right: 1lrem; 


} 





看 上 去 好 像 没 什么 问题 ， 但 实际 上 增加 了 我 们 日 后 开发 维护 的 成 
本 ， 因 为 绝对 定位 元 素 的 定位 值 和 列表 容器 的 padding 值 耦合 在 一 起 
了 : 当 我 们 对 padding 间 距 进行 调整 的 时 候 ， 绝 对 定位 元 素 的 
right、top 值 也 一 定 要 跟着 一 起 调整 ， 否 则 就 会 出 现 样式 问题 ， 而 实 
际 开发 的 时 候 ， 起 记 调 整 绝 对 定位 元 素 的 定位 值 是 非常 常见 的 ，bug 继 
而 出 现 。 











对 一 个 项 目 而 言 ， 间 距 并 非 一 成 不 变 ， 列 表 间 的 上 下 左右 间距 会 因 
为 内 容 或 者 场景 的 不 同 而 不 同 ， 这 就 导致 每 一 次 出 现 有 差异 的 布局 ， 我 
们 都 需要 重新 额外 写 一 个 定位 样式 。 例 如 : 














.list-2 { 
padding: .75rem; 


} 
.tag-2 { 


position: absolute; 
top: .75rem; right: .75rem; 
} 





这 显然 增加 了 一 定 的 开发 成 本 。 而 相对 于 padding box 定 位 ， 列 表 的 
padding 属 性 值 是 多 少 对 我 们 的 样式 表现 没有 任何 影响 。 眼 见 为 实 ， 扫 
下 面 的 三 维 码 访问 。 点 击 列表 下 面 的 按钮 改变 列表 的 padding 值 大 小 会 
发 现 ， 我 们 的 标签 在 右上 和 角 微 丝 不 动 ， 如 图 6-49 所 示 。 














各 改变 列表 padding 大 小 了 


图 6-49 padding 变 大 后 绝对 定位 元 素 位 置 依旧 稳固 














然而 ， 实 际 项 目 场景 千变万化 ， 有 时 候 ， 我 们 需要 的 效果 并 不 是 定 
位 在 列表 的 边缘 ， 而 是 定位 在 内 容 的 边缘 ， 很 多 人 不 假 思 索 就 直接 使 用 
类 似 下 面 的 代码 实现 : 





.list { 
padding: 1lrem; 


.tag { 
position: absolute; 
top: 1lrem; right: 1lrem; 
} 














效果 虽然 达成 了 ， 但 是 底子 还 是 不 够 稳固 ， 因 为 top、right 属 性 
值 大 小 和 padding 属 性 值 耦合 在 了 一 起 。 实 际 上 ， 有 小 技巧 可 以 使 其 不 
耦合 ， 那 就 是 间距 不 是 使 用 padding 撑 开 ， 而 是 使 用 透明 的 border 撑 
开 。 例 如 : 

.list { 


border: 1rem solid transparent; 


} 


.tag { 
position: absolute; 
top: 6; right: ©; 

} 








top、right 属 性 值 都 是 9， 被 固定 了 下 来 ， 于 是 当 间 距 发 生变 化 的 
时 候 ， 只 需要 改变 border 宽 度 承 可 以 ， 示 意 如 下 : 


.ist-2 { 
border: .75rem solid transparent 





此 技巧 唯一 需要 注意 的 束 是 尽量 不 要 设置 overflow:hidden。 
6.5.2 具有 相对 特性 的 无 依赖 absolute 绝 对 定位 


即使 写 了 很 多 年 CSS 代 人 码 的 人 也 可 能 会 错误 地 回答 下 面 这 个 问题 : 
一 个 绝对 定位 元 素 ， 没 有 任何 left/top/right/bottom 属 性 设置 ， 并 
且 其 祖先 元 素 全 部 都 是 非 定位 元 素 ， 其 位 置 在 哪里 ? 











很 多 人 都 认为 是 在 浏览 右 窗 口 左 上 方 。 实 际 上 ， 还 是 当前 位 置 ， 不 
是 在 浏览 器 左上 方 。 


这 是 关于 absolute 绝 对 定位 最 典型 的 错误 认 知 。 正 是 这 种 错误 认 
知 导 致 凡是 使 用 absolute 绝 对 定位 的 地 方 ， 一 定 父 容 
器 position:relative， 同 时 left/top 等 属性 定位 ， 甚 至 必 同 时 使 
用 z-index 属 性 设置 层级 。 




















在 我 看 来 ， 这 是 非常 严重 的 认 知 和 使 用 错误 ! 


请 牢记 下 面 这 句 话 : absolute 是 非常 独立 的 CSS 属 性 值 ， 其 样式 和 
行为 表现 不 依赖 其 他 任何 CSS 属 性 就 可 以 完成 。 


言语 是 苍白 的 ， 我 们 来 看 一 个 例子 感受 一 下 。 图 6-50 左 上 角 有 一 
个 “TOP1” 的 图 形 标 志 ， 请 问 如 何 布局 ? 


灼 
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图 6-50 左上 角 有 “TOP1” 图 形 目标 效果 示意 





想必 很 多 人 是 这 么 实现 的 : 


.father { 
position: relative; 


} 


.Shape { 
position: absolute; 
top: 8; left: 0; 











如 果 你 也 是 这 么 实现 的 ， 就 要 注意 了 ， 因 为 这 说 明 你 对 absolute 
认 知 还 是 太 浅 薄 了 。 实 际 上 ， 只 用 下 面 一 行 CSS 就 足够 了 : 





.Shape { 
position: absolute; 


} 


没 错 ， 就 这 一 行 ， 而 且 兼 容 性 好 得 出 奇 。 眼 见 为 实 ， 手 动 输入 
http:Wdemo.cssworld.cm/6/5-4.php 或 者 扫 右 侧 的 二 维 码 。 








看 到 没 ? absolute 定 位 效果 实现 完全 不 需要 父 元 素 设 置 position 
为 relative 或 其 他 什么 属性 就 可 以 实现 ， 我 把 这 种 没有 设 
置 left/top/right/bottom 属 性 值 的 绝对 定位 称 为 “无 依赖 绝对 定 
位 ”。 很 多 场景 下 , “无 依赖 绝对 定位 ?要 比 使 用 left/top 之 类 属性 定位 
实用 和 强大 很 多 ， 因 为 其 除了 代码 更 简洁 外 ， 还 有 一 个 很 棒 的 特性 ， 就 
是 “相对 定位 特性 ”。 








明明 absolute 是 :绝对 定位 :的 意思 ， 怎 么 又 扯 到 “相对 定位 特性 :了 
呢 ? 没 错 , “无 依赖 绝对 定位 ?本质 上 就 是 “相对 定位 >， 仅 仅 是 不 占据 
CSS 流 的 尺寸 空间 而 已 。 




















“相对 性 ”和 “不 占据 空间 ”这 两 个 特性 在 实际 开发 的 时 候 非 常 有 用 ， 
除了 上 和 面 左 上 角 加 “TOP1” 图 形 标志 的 案例 ， 我 再 举 几 个 实用 例子 ， 展 
示 一 下 “无 依赖 绝对 定位 ”的 强大 之 处 。 


1. 各 类 图 标定 位 





我 们 经 第 会 在 导航 右上 方 增加 一 个 “NEW” 或 者 “HOT” 这 样 的 小 图 
标 ， 如 图 6-51 所 示 。 要 实现 在 导航 文字 右上 方 的 定位 很 简单 ， 直 接 对 加 
图 标 这 个 元 素 进 行 样式 设 定 束 可 以 了 ， 原 来 纯 文字 导航 时 的 样式 完全 不 
需要 有 一 丁点 儿 的 修改 。 下 面 以 “HOT” 图 标 为 例 : 




















图 6-51 ”导航 文字 右上 方 图 标示 意 


.Icon-hot { 
position: absolute; 
margin: -6px 6 86 2px; 


width: 28px; height: 11px; 
background: url(hot.gif); 
} 





一 个 简 简 单单 的 position:absolute， 然 后 通过 margin 属 性 进行 
定位 ， 效 果 即 达成 ， 包 括 IE6 在 内 的 浏览 器 都 是 兼容 良好 的 。 


日 后 这 个 图 标 下 架 了 ， 我 们 只 需要 把 图 标 对 应 的 HIML 代 码 和 CSS 





删 探 就 可 以 ， 原 来 的 代码 完全 不 需要 改动 。 不 仅 代码 简洁 ， 日 后 的 维护 
也 很 方便 ， 更 关键 的 是 ， 即 使 导航 中 的 文字 长 度 发 生 了 变化 ， 我 们 的 图 
标 依然 定位 民 好 ， 因 为 “无 依赖 绝对 定位 ”的 图 标 是 自动 跟 在 文字 后 面 显 
示 的 。 








设想 一 下 ， 如 果 给 父 元 素 设置 position:relative， 然 
后 right/top 定 位 ， 文 字 长 度 一 旦 发 生变 化 ，CSS 代 码 就 要 重新 调整 ， 
这 维护 成 本 显然 要 比 前 一 种 方法 高 了 很 多 。 眼 见 为 实 ， 手 动 输入 
http://demo.cssworld.cn/6/5-5.php 或 者 扫 下 面 的 二 维 码 。 实 际 上 ， 即 使 是 
普通 的 水 平 对 齐 的 图 标 也 可 以 使 用 “无 依赖 绝对 定位 ”实现 ， 类 似 图 6-52 
所 示 效 果 。 














图 6-52 ”图 片 和 文字 水 平 对 齐 


我 们 可 以 这 么 处 理 : 





<Span class="icon-x"> 
<i class="icon-warn"></i> 邮 箱 格 式 不 准确 














</span> 


.Icon-X { 
line-height: 26pX; 
padding-left: 28px; 


.ijcon-warn { 
position: absolute; 
margin-left: -26px; 
width: 26px; height: 28px; 
background: url(warn.png) no-repeat center; 


} 





同样 是 position:absolute， 然 后 简单 的 margin 偏 移 实 现 。 此 方 
法 兼容 性 很 好 ， 与 inline-block 对 齐 相 比 的 好 处 在 于 ，inline-block 
对 齐 最 终 行 框 高度 并 不 是 28px， 因 为 中 文 下 沉 ， 图 标 居 中 ， 要 想 视 觉 上 
水 平 ， 图 标 vertical-align 对 齐 要 比 实际 低 一 点 儿 ， 这 就 会 导致 最 终 
整个 行 框 的 高 度 不 是 预期 的 28px， 而 是 21px 或 者 更 大 。 但 是 ， 如 果 使 
用 “无 依赖 绝对 定位 ”实现 ， 则 完全 不 要 担心 这 一 问题 ， 因 为 绝对 定位 元 
素 不 会 改变 正 剃 流 的 尺寸 空间 ， 就 算 我 们 的 图 标 有 36px 大 小 ， 行 框 高 度 
依然 是 纯 文本 所 在 的 28px 高 度 。 











2. 超越 第 规 布局 的 排版 





图 6-53 给 出 的 是 一 个 常见 的 注册 表单 ， 为 了 保证 视觉 舒适 ， 我 们 往 
往 会 让 表单 水 平 导 中 对 齐 。 例 如 ， 这 里 宽度 300 多 像素 ， 于 是 有 : 








+ 邮箱 


图 6-53 ”水 平 居中 对 齐 的 注册 表单 





.box { 

width: 356px; 

margin: auto; 
} 

通过 设置 margin:auto 实 现 水 平 居中 效果 ， 乍 一 看 效果 达成 ， 但 是 
实际 开发 的 时 候 还 有 提示 或 报错 等 交互 效果 。 有 一 种 做 法 是 提示 信息 放 
在 输入 框 的 下 面 ， 但 这 样 做 会 市 来 一 种 不 好 的 体验 ， 那 就 是 提示 信息 出 
现 和 隐藏 的 时 候 ， 整 个 容器 的 高 度 会 突然 变化 ; 还 有 一 种 做 法 就 是 在 输 
入 框 的 后 面 显示 ， 但 是 为 了 让 默认 状态 下 表单 水 平 居 中 ， 外 面容 器 的 宽 
度 不 是 很 大 ， 因 此 如 果 在 后 面 显示 ， 就 会 有 宽度 不 够 的 问题 。 如 果 我 们 
使 用 “无 依赖 绝对 定位 ”， 那 这 个 问题 就 不 再 是 问题 了 。 假 设 提 示 文 字 内 
容 元 素 的 类 名 是 .remark， 则 有 CSS 代 码 如 下 : 

















remark { 
position: absolute; 


margin-left: 16px; 
} 





就 这 么 简 简单 单 的 CSS 代 码 ， 效 果 即 达成 ， 既 在 输入 框 的 后 面 显 
示 ， 义 跳出 了 容器 宽度 的 限制 ， 同 时 显 隐 不 会 影响 原先 的 布局 。 





眼见 为 实 ， 输 入 后 面 的 演示 页 面 地 址 体验 : 
http://demo.cssworld.cn/6/5-6.php。 效 果 如 图 6-54 所 示 。 








图 6-54 “无 依赖 绝对 定位 ”提示 信息 布局 示意 


更 为 关键 的 是 ， 提 示 信 息 的 位 置 智能 跟随 输入 框 。 例 如 ， 我 们 这 里 
把 输入 框 的 宽度 改 小 ， 会 看 到 提示 信息 会 自动 跟着 往 前 走 ， 如 图 6-55 所 
示 。 与 容器 设置 position:relative 再 通过 left 属 性 实现 的 定位 相 
比 ， 其 代码 更 简洁 ， 容 错 性 更 强 ， 维 护 成 本 更 低 。 











此 外 ， 页 面 中 的 星 号 也 是 典型 的 “无 依赖 绝对 定位 *”， 自 身 绝对 定 
位 ， 然 后 通过 margin- left 负 值 偏 移 实 现 ， 从 而 保证 所 有 输入 信息 头 
左 对 齐 ， 同 时 又 不 会 影响 原先 的 布局 ， 也 就 是 星 号 有 没有 对 布局 没有 任 


何 影响 。 











3. 下 拉 列 表 的 定位 


在 实现 静态 下 拉 效 果 的 时 候 ， 也 是 可 以 使 用 “无 依赖 绝对 定位 ”的 。 
演示 页 面 地 址 http://demo.cssworld.cn/6/5-7.php 给 出 了 一 个 例子 。 当 我 们 
focus 输 入 框 的 时 候 ， 下 拉 列 表 会 呈现 ， 如 图 6-56 所 示 。 


二 邮箱 


+ 密码 请 输入 6-16 位 密码 ， 不 能 使 用 空格 


图 6-55 “无 依赖 绝对 定位 ?智能 跟随 示意 











图 6-56 “无 依赖 绝对 定位 ”下 拉 列 表 效 果 


这 里 ， 这 个 下 拉 列 表 的 定位 采用 的 就 是 “无 依赖 绝对 定位 ”"， 相 关 
HTML 和 和 CSS 代码 如 下 : 





<input> 
<div class="result"> 
<div class="datalist"> 
xa href> 搜 索 结 果 1</a> 


</div> 
</div> 
/* 下 拉 列 表 的 无 依赖 绝对 定位 */ 
.datalist { 

position: absolute; 





} 

/* 列表 的 显 隐 控 制 */ 

.Search-result { 
display: none; 





input:focus ~ .search-result { 
display: block; 





就 一 个 position:absolute 就 实现 了 我 们 想 要 的 效果 ， 没 
有 1left、top 定 位 ， 父 元 素 也 没有 position:relative 设 定 ， 效 果 就 达 
成 了 ， 而 且 兼 容 性 好 到 正 6 都 完美 定位 。 


除了 代码 少 这 个 好 处 外 ， 维 护 成 本 也 在 一 定 程度 上 降低 了 ， 比 方 
说 ， 输 入 框 的 高 度 发 生 了 变化 ， 我 们 不 需要 修改 任何 CSS 人 代码， 列表 依 
然 在 输入 框 的 底部 完美 对 齐 显示 。 不 仅 如 此 ， 没 有 了 父 元 
素 position:relative 限 定 ， 我 们 的 z-index 层 级 管理 规则 更 简单 了 ， 
并 且 也 无 须 担心 父 元 素 设置 oveflow:hidden 会 裁剪 下 拉 列 表 。 











不 过 这 里 我 有 必要 补充 一 点 ， 虽 然 “ 无 依赖 绝对 定位 ?好 处 多 多 ， 但 
建议 只 用 在 静态 交互 效 果 上 ， 比 方 说 ， 导 航 二 级 菜单 的 显示 与 定位 。 如 
果 是 动态 呈现 的 列表 ， 建 议 还 是 使 用 JavaScript 来 计算 和 定位 。 





4. 占 位 符 效果 模拟 


IE9 及 其 以 下 浏览 器 不 支持 placeholder 占 位 符 效果 ， 实 际 开发 的 
时 候 ， 针 对 这 些 浏 览 器 ， 需 要 进行 模拟 。 比 较 好 的 做 法 是 使 用 <label> 
标签 和 输入 框 关联 并 覆盖 在 输入 框 上 耐 ， 好 处 是 点 击 占 位 文字 输入 框 天 
然 focus， 并 且 不 会 污染 输入 框 的 value。 








这 里 的 履 盖 效果 也 可 以 使 用 “无 依赖 绝对 定位 ?实现 ， 好 处 是 组 件 化 


的 时 候 适 用 性 更 三 ， 因 为 不 会 对 父 级 元 系 进行 定位 属性 限制 。 用 下 面 的 
代码 简单 演示 一 下 实现 原理 : 





<label class= en for="text"> 占 位 符 </label> 
<input id="test" 
/* 和 输入 框 一 样 的 样 式 */ 

.placeholder, input { 





} 

/* 占 位 符 元 素 特 有 样式 */ 

.placeholder { 
position: absolute; 























由 于 “无 依赖 绝对 定位 ”本 质 上 就 是 一 个 不 占据 任何 空间 的 相对 定位 
元 素 ， 因 此 这 里 我 们 让 占 位 符 元 素 和 输入 框 的 布局 样式 一 模 一 样 ， 再 设 
和 罩 绝 对 定位 ， 束 可 以 和 输入 完美 重 登 定位。 当然 有 一 些 样 式 是 需要 重 置 
的 ， 比 方 说 ， 输 入 框 经 常会 设置 border 边 框 样式 ， 那 么 我 们 的 占 位 符 
元 素 就 需要 把 边框 颜色 设置 成 透明 的 ， 例 如 : 








.placeholder { 
border-color: transparent; 


} 





随 着 时 代 的 进步 和 浏览 占 的 发 展 ， 这 种 占 位 符 效 果 模 拟 的 场景 会 越 
来 越 少 ， 因 此 这 里 残 不 专门 做 演示 页 面 详细 展开 讲解 了 。 但 是 ,“ 无 依 
赖 绝对 定位 ”的 简约 便捷 以 及 健壮 性 是 显而易见 的 。 


5. 进一步 深入 “无 依赖 绝对 定位 ” 


虽然 说 元 素 position:absolute 后 的 display 计 算 值 都 是 块 状 的 ， 
但 是 其 定位 的 位 置 和 没有 设置 position:absolute 时 候 的 位 置 相关 。 
举 个 简单 的 例子 ， 有 下 面 两 段 HTML 人 代码 : 


<h3> 标 题 <span class="follow">span</span></h3> 


<h3> 标 题 <div class="follow">div</div></h3> 





其 差别 就 在 于 “标题 ”文字 后 面 跟随 的 标签 ， 一 个 是 内 联 的 <span>， 
还 有 一 个 是 块 状 的 <div>， 此 时 ， 显 然 span 字 符 是 跟 在 “标题 ”后 面 显 
示 ，div 字 符 则 换行 在 “标题 "下面 显 示 ， 这 个 想必 大 家 都 知道 。 好 ， 现 
在 有 如 下 CSS 代 码 : 





.follow { 
position: absolute; 


} 
虽然 此 时 无 论 是 内 联 的 <span> 还 是 块 状 的 <div>， 计 算 值 都 
是 block， 但 是 它们 的 位 置 还 和 没有 应 用 position:absolute 的 时 候 一 
样 ， 一 个 在 后 面 ， 一 个 在 下 面 ， 如 图 6-57 所 示 。 
标题 span 
标题 
div 


图 6-57 “无 依赖 绝对 定位 ”表现 规则 示意 


假如 HIML 是 下 面 这 样 的 ; 


<h3> 标 题 </h3><span class="follow">span</span> 





<h3> 标 题 </h3><div class="follow">div</div> 





那么 由 于 非 绝 对 定位 状态 下 span 和 div 都 在 “标题 ”的 下 面 ， 因 此 ， 这 里 
最 后 的 效果 也 同样 是 都 在 “标题 ”的 下 面 。 


看 上 去 ,“ 无 依赖 绝对 定位 ”的 定位 原理 还 是 挺 简单 的 ， 但 是 在 实际 
开发 的 时 候 ， 有 时 候 会 遇 到 一 点 问题 。 








首先 ，IE7 浏 览 器 下 ， 块 状 的 <div>“ 无 依赖 绝对 定位 * 的 定位 表现 如 
同 内 联 的 <span>， 也 就 是 无 论 古 块 级 元 素 还 是 内 联 元 系 ,“ 无 依赖 绝对 
定位 ”后 都 和 内 联 元 系 一 行 显示 。 大 要 保证 兼容 ， 可 以 在 外 部 套 一 层 空 
的 <div> 标 签 来 维持 原始 的 块 状 特性 。 不 过 ， 因 为 现在 很 少 需要 兼容 IE7 
浏览 器 ， 所 以 这 不 算 事 儿 。 














其 次 ， 前 文 提 到 浮动 和 绝对 定位 是 死对头 ， 当 “浮动 * 和 “无 依赖 绝 
对 定位 ?相遇 的 时 候 ， 就 会 发 生 一 些 不 愉快 的 事情 。HTML 代 码 如 下 : 


<div class="nav"> 导 航 1</div> 


<img src="new.png" class="follow"> 
<div class="nav" > 导航 2</div> 





这 里 .nav 是 一 个 浮动 色 块 ， 相 关 CSS 如 下 : 


.follow { 
position: absolute; 


.nav { 
width: 166px; 


line-height: 46px; 
background-color: #333; 
color: #fff; 
text-align: center; 
float: left; 











结果 在 了 下 和 Chrome 浏 览 器 下 ， 夹 在 中 间 的 <img> 在 中 间 显 示 《〈 见 图 
6-58 上 ) ， 但 是 Firefox 浏 览 器 却 是 在 最 后 显示 〈 见 图 6-58 下 ) 。 











导 般 1 导航 2 


导航 1 导航 2 


图 6-58 “浮动 ”和 “无 依赖 绝对 定位 ?不 一 致 的 表现 





此 处 的 浏览 器 不 一 致 的 行为 表现 应 该 属于 “未 定义 行为 ”， 没 有 谁 对 
谁 错 ， 只 是 各 自 按照 自己 的 泻 染 规则 表现 而 已 。Firefox 浏 览 器 下 的 定位 
位 置 或 许 比 较 好 理解 ， 因 为 和 没有 设置 position: absolute 表 现 一 
致 ， 符 合 我 们 对 上 面 规则 的 理解 。 那 为 何 正 和 Chrome 浏 览 器 却 在 中 间 旺 
示 呢 ?我 认为 是 这 样 的 : 浏览 器 对 于 DOM 元 素 的 样式 泻 染 是 从 前 往 
后 、 由 外 及 内 的 ， 因 此 泻 染 顺序 是 先 “ 导 航 1”"， 再 “图 片 ”” 最 后 是 “导航 
2”。 当 演 染 到 “图 片 ” 的 时 候 ， 由 于 “导航 1” 左 浮动 ， 因 此 内 联 的 图 片 跟 
在 后 面 显 示 ， 此 时 由 于 设置 了 position:absolute， 因 此 当前 位 置 定 
位 并 不 占据 任何 空间 ， 再 泻 染 “ 导 航 2” 的 时 候 ， 中 间 的 “图 片 ” 基 本 上 跟 
不 存在 没什么 区 别 ， 因 此 也 就 和 “导航 1” 紧 密 相 连 了 ， 最 终 形 成 了 “图 
片 ”在 中 间 显 示 的 样式 表现 。 





























对 于 上 述 场景 ， 如 果 硕 望 各 个 浏览 器 的 表现 都 是 一 样 的 ，<img> 外 
层 舱 套 一 层 标签 并 浮动 即 可 ， 注 意 ， 是 外 层 标签 浮动 。 由 于 浮动 和 绝对 
定位 水 火 不 容 ， 本 里 设置 浮动 是 没有 任何 效果 的 。 











6.5.3 ” absolute 与 text-align 


按 道理 讲 ，absolute 和 float 一 样 ， 都 可 以 让 元 素 块 状 化 ， 应 该 不 
会 受 控制 内 联 元 素 对 齐 的 text-align 属 性 影响 ， 但 是 最 后 的 结果 却 出 
人 意料 ，text-align 居 然 可 以 改变 absolute 元 素 的 位 置 。 








如 下 简单 的 HTML 和 CSS 代 码 : 





<p><img src="1.jpg"></p> 
pi 


text-align: center; 


} 
img { 
position: absolute; 


在 Chrome 和 Firefox 浏 览 器 下， 图 片 在 中 间 位 置 显 示 了 ， 但 是 仪 仪 是 在 中 
间 区 域 显 示 ， 并 不 是 水 平 居 中 ， 如 果 我 们 给 <p> 设 定 尺寸 并 添加 背景 
色 ， 就 会 看 到 如 图 6-59 所 示 的 效果 。 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/6/5-8.php 或 者 扫 下 面 的 
二 维 码 。 











图 6-59 ”图 片 在 中 间 位 置 开始 显示 











虽然 本 示例 中 图 片 位 置 确实 受 text-align 属 性 影响 ， 但 是 并 不 
是 text-align 和 absolute 元 素 直 接 发 生 关 系 ，absolute 元 素 的 





display 计 算 值 是 块 状 的 ，text-align 是 不 会 有 作用 的 。 这 里 之 所 以 
产生 了 位 置 变化 ， 本 质 上 是 “幽灵 空白 节点 ”和 “无 依赖 绝对 定位 ?共同 作 
用 的 结 








具体 的 泻 染 原 理 如 下 。 


(1) 由 于 <img> 是 内 联 水 平 ，<p> 标 签 中 存在 一 个 宽度 为 0O、 看 不 
见 摸 不 着 的 “幽灵 空白 节点 >”， 也 是 内 联 水 平 ， 于 是 受 text- 
align:center 影 响 而 水 平 居 中 显示 。 








(2) <img> 设 置 了 position:absolute， 表 现 为 “无 依赖 绝对 定 
位 ”， 因此 在 “幽灵 空 日 节点 ”后 面 定位 显示 ; 同时 由 于 图 片 不 占据 空 
间 ， 这 里 的 “幽灵 空白 节点 ”当仁不让 ， 正 好 在 <p> 元 素 水 平 中 心 位 置 显 
`“， 于 是 我 们 就 看 到 了 图 片 从 <p> 元 际 水 平 中 间 位 置 显 示 的 效果 。 

















让 | 


这 是 非常 简约 的 定位 表现 。 此 时 ， 我 们 只 要 margin-left 一 半 图 片 
宽度 负 值 大 小 ， 束 可 以 实现 图 片 的 水 平 居 中 效果 了 ， 与 父 元 
素 position:relative 然 后 定位 元 素 设置 left:56% 的 方法 相 比 ， 其 优 
势 在 于 不 需要 改变 父 元 素 的 定位 属性 ， 避 免 可 能 不 希望 出 现 的 层级 问题 


有 
等 。 








然而 ， 焉 浏览 器 的 支持 不 一 样 导 致 此 方法 的 场景 实用 性 打 了 折扣 。 
当然 ， 有 小 技巧 可 以 使 所 有 浏览 器 都 完美 支持 ， 如 果 只 需要 兼容 下 
Edge《〈 移 动 端 开发 时 候 ) ， 额 外 加 下 面 这 一 段 CSS 话 句 就 可 以 了 : 
p:before { 


content: ” 


} 





如 果 和 希望 兼容 下 8 浏览 器 ， 则 CSS 代 码 还 要 再 多 一 点 儿 : 


pi 
text-align: center; 
font-size: .1px; 
font-size: -webkit-calc(1ipx - 1px); 


p:before { 
content: '\2802'; 
} 
img { 
position: absolute; 


} 





其 中 ，\2662 表 示 茶 一 种 空格 。 通 过 插入 显 式 的 内 联 字 符 ， 而 非 借 
助 昧 水 的 “幽灵 空白 节点 ”实现 所 有 浏览 器 下 的 一 致 表现 。 





眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/6/5-9.php 或 者 扫 右 侧 的 
二 维 人 码 。 














需要 注意 的 是 ， 只 有 原本 是 内 联 水 平 的 元 系 绝 对 定位 后 可 以 受 
text- align 属 性 影响 ， 这 不 难 理解 ， 因 为 块 级 元 素 的 “无 依赖 绝对 定 
位 ?是 掉 在 下 面 显示 的 ， 水 平方 向 上 并 无 可 “依赖 ”的 内 联 元 素 ，text- 


align 属 性 目 然 鞭 长 莫 及 。 








按照 我 的 经 验 ， 利 用 text-align 控 制 absolute 元 素 的 定位 最 适合 
的 使 用 场景 就 是 主 窗 体 右 侧 的 “返回 顶部 ”以 及 “反馈 ”等 小 布局 的 实现 。 
例如 ，http://demo. cssworld.cn/6/5-10.php 对 应 的 实例 页 面 效 果 ， 核 心 区 
域 如 图 6-60 所 示 。 图 6-60 所 示 的 效果 的 核心 HTML 和 和 CSS 代码 如 下 : 


@ 
S 





图 6-60 ” 主 结 构 右 外 侧 固 定 定位 布局 示意 








<div class="alignright"> 
<span class="follow"></span> 

</div> 
.alignright { 

height: ©; 

text-align: right; 

overflow: hidden; 
} 
.alignright:before { 

content: "\2802"; 


} 

.follow { 
position: fixed; 
bottom: 1066px; 
z-index: 1; 


} 





使 用 :before 伪 元 素 在 前 面 插入 一 个 空格 ， 此 时 .alignright 设 置 
text-align:right， 则 此 空格 对 齐 主 结构 的 右边 缘 显 示 ， 后 面 的 固定 
定位 元 素 〈 同 绝对 定位 元 素 ) 由 于 “无 依赖 定位 ?特性 ， 左 边缘 正好 就 是 
主 结构 的 右边 缘 ， 天 然 跑 到 主 结构 的 外 面 显 示 了 ， 而 这 个 效 末 正 是 固定 








在 右 下 角 的 “返回 顶部 ”以 及 “反馈 ”小 按钮 布局 需要 的 效果 。 


此 方法 兼容 性 很 好 ， 层 级 单纯 ， 唯 一 的 问题 就 是 插入 了 一 个 空格 ， 
会 占据 一 定 的 高 度 ， 这 是 不 推荐 的 ， 最 好 就 是 有 没有 “返回 顶部 ”等 元 素 
都 不 影响 主 结构 的 布局 。 所 以 ， 我 们 要 把 占据 的 高 度 抹 掉 ， 方 法 很 简 
单 ， 设 置 height: 6 同时 overflow:hidden 即 可 。 














此 时 ， 有 人 可 能 会 惊 呼 : 什么 ? 设置 height:6 同 时 
overflow:hidden? 那 岂 不 是 里 面 所 有 元 际 都 被 剪裁 看 不 见 啦 ? 


如 果 是 普通 元 素 确 实 会 如 此 ， 但 是 对 于 absolute 绝 对 定位 以 及 
fixed 固 定 定 位 元 素 ， 规 则 要 更 复杂 ! 





6.6 absolute 与 overflow 








overflow 对 absolute 元 素 的 剪裁 规则 用 一 句 话 表述 束 是 : 绝对 定 
位 元 素 不 总 是 被 父 级 overflow 属 性 剪裁 ， 尤 其 当 overflow 在 绝对 定位 
元 素 及 其 包含 块 之 间 的 时 候 。 





上 面 这 人 句 话 是 官方 文档 的 直译 ， 似 乎 还 是 有 些 描 口 ， 我 们 再 换 一 种 
方法 表述 就 是 ;如果 overflow 不 是 定位 元 素 ， 同 时 绝对 定位 元 素 和 
overflow 容 器 之 间 也 没有 定位 元 素 ， 则 overflow 无 法 对 absolute 元 素 
进行 剪裁 。 





因此 下 面 HTML 中 的 图 片 不 会 被 剪裁 : 


<div style="overflow: hidden;"> 


<img src="1.jpg" style="position: absolute;"> 
</div> 





overf1low 元 素 父 级 是 定位 元 素 也 不 会 剪裁 ， 例 如 : 


<div style="position: relative;"> 
<div style="overflow: hidden;"> 
<img src="1.jpg" style="position: absolute;"> 
</div> 
</div> 





但 是 ， 如 果 overflow 属 性 所 在 的 元 素 同 时 也 是 定位 元 素 ， 里 面 的 
绝对 定位 元 素 会 被 剪裁 : 


<div style="overflow: hidden; position: relative;"> 
<img src="1.jpg" style="position: absolute;"> <!-- 前 裁 --> 


</div> 











如 果 overflow 元 素 和 绝对 定位 元 素 之 间 有 定位 元 素 ， 也 会 被 可 
裁 : 


<div style="overflow: hidden;"> 
<div style="position: relative;"> 


<img src="1.jpg" style="position: absolute;"> <!-- 剪裁 --> 
</div> 
</div> 





如 果 overflow 的 属性 值 不 是 hidden 而 是 auto 或 者 scro11， 即 使 绝 
对 定位 元 素 高 宽 比 overflow 元 素 高 宽 还 要 大 ， 也 都 不 会 出 现 滚动 条 。 
例如 ， 下 面 的 HTML 和 CSS 代 码 : 





<div class="box"> 
<img src="1.jpg"> 

</div> 

.box { 
width: 366px; height: 166pX; 
background-color: #f6f3f9; 
overflow: auto; 

} 

.box > img { 
width: 256px; height: 192px; 
position: absolute; 





} 


图 片 高 度 256px 比 容器 .box 高 度 169px 明 显 高 出 了 一 截 ， 但 是 ， 没 
有 滚动 条 出 现 。 





实际 开发 的 时 候 ， 绝 对 定位 元 素 和 非 绝 对 定位 元 素 往 往 可 能 混杂 在 
一 起 ， 虽 然 绝 对 定位 元 素 不 能 让 滚动 条 出 现 ， 但 是 非 绝 对 定位 元 素 可 
以 ， 于 是 ， 就 可 能 出 现 另 外 一 种 很 有 特色 的 现象 ， 即 当 容 器 滚动 的 时 
候 ， 绝 对 定位 元 系 微 丝 不 动 ， 不 跟着 深 动 ， 表 现 类 似 fixed 固 定 定 位 ， 
如 图 6-61 所 示 ， 深 动 到 头 和 滚动 到 尾 ， 图 片 的 位 置 都 是 一 样 的 。 眼 见 为 








实 ， 手 动 输入 http:/demo.cssworld.cn/6/5-11.php 或 者 扫 下 面 的 二 维 码 。 








图 6-61 绝对 定位 元 素 不 跟随 滚动 示意 


最 后 ， 非 常 有 必要 补充 一 点 ， 那 就 是 由 于 position:fixed 国 定 定 
位 元 素 的 包含 块 是 根 元 素 ， 因 此 ， 除 非 是 窗 体 滚 动 ， 否 则 上 面 讨论 的 所 
有 overflow 剪 裁 规则 对 固定 定位 都 不 适用 。 这 一 点 后 面 还 会 提 及 。 








了 解 这 些 特性 有 什么 用 呢 ? 





作用 一 是 解决 实际 问题 。 例 如 上 一 节 最 后 “返回 顶部 ”的 案例 ， 保 证 
高 度 为 6， 同时 里 面 的 定位 内 容 不 会 被 剪裁 ， 或 者 在 局 部 滚动 的 容器 中 
模拟 近似 position:fixed 的 效果 。 作 用 二 是 在 遇 到 类 似 现 象 的 时 候 知 
道 问 题 所 在 ， 可 以 “对 症 下 药 ”， 人 快速 解决 问题 。 














然而 ， 虽 然 实际 开发 的 时 候 ， 对 于 局 部 滚动 ， 我 们 经 单 会 有 元 双 不 
跟随 滚动 的 需求 ， 如 表 头 固定 ， 但 是 从 可 维护 性 的 角度 讲 ， 建 议 还 是 将 
这 个 表 头 元 素 移动 到 滚动 容器 外 进行 模拟 ， 因 为 我 们 总 会 不 小 心 在 某 一 
层 标签 添加 个 类 似 position:relative 的 声明 ， 此 时 ， 原 本 的 不 跟随 
滚动 的 表 头 会 因为 包含 块 的 变化 变 得 可 以 滚动 了 ， 这 显然 是 我 们 不 愿意 
看 到 的 。 当 然 ， 如 果 HTML 结 构 被 限制 无 法 修改 ， 则 利用 overflow 深 
动 absolute 元 素 不 滚动 的 特性 来 实现 表 头 固定 的 效果 则 是 上 上 之 选 ， 
会 让 人 眼前 一 亮 ! 














在 CSS 世 界 中 ， 上 面 说 的 这 些 几 乎 都 是 完美 无 瑕 的 ， 但 是 ， 随 着 
CSS3 新 世界 到 来 的 冲击 ， 规 则 在 不 经 意 间 发 生 了 一 些 变 化 ， 其 中 最 明 
显 的 就 是 transform 属 性 对 overf1low 剪 裁 规 则 的 影响 ，CSS3 新 世界 中 
transform 属 性 似乎 扮演 了 原本 “定位 元 素 ” 的 角色 ， 但 是 这 种 角色 扮演 
并 不 完全 。 什 么 意思 呢 ? 我 们 先 看 下 面 我 统计 的 出 现 transform 属 性 时 
overflow 剪 裁 绝 对 定位 元 素 的 数据 。 














overf1low 元 素 自 身 transform: 


e。 IE9 及 以 上 版 本 浏览 器 、Firefox 和 Safari (OS X、iOS) 剪裁 ; 
。 Chrome 和 Opera 不 剪裁 。 


overf1low 子 元 素 transform: 


。IE9 及 以 上 版 本 浏览 器 、Firefox 和 Safari (OS X、iOS) 剪裁 ; 
。 Chrome 和 Opera 剪 裁 。 


可 以 看 到 overflow 元 素 自 身 transform 的 时 候 ，Chrome 和 Opera 浏 
览 占 下 的 overflow 檀 裁 是 无 效 的 ， 这 是 唯一 和 有 定位 属性 时 的 
overflow 剪 裁 不 一 样 的 地 方 ， 因 此 才 有 “角色 扮演 并 不 完全 ”的 说 法 。 





transform 除 了 改变 overflow 属 性 原 有 规则 ， 对 层 攻 上 下 文 以 及 
position:fixed 的 演 染 都 有 影响 。 因 此 ， 当 大 家 遇 到 absolute 元 素 被 
剪裁 或 者 Fixed 固定 定位 失效 时 ， 可 以 看 看 是 不 是 transform 属 性 在 作 


Ea 
为 ~ 0 





6.7 ” absolute 与 clip 


CSS 世 界 中 有 些 属 性 或 者 特性 必须 和 其 他 属性 一 起 使 用 才 有 效 ， 比 
方 说 剪裁 属性 clip。clip 属 性 要 想起 作用 ， 元 素 必须 是 绝对 定位 或 者 
固定 定位 ， 也 就 是 position 属 性 值 必须 是 absolute 或 者 fixed。 








clip 属 性 语法 如 下 : 


clip: rect(top right bottom left) 


实际 上 ， 标 准 语法 应 该 是 : 


clip: rect(top, right, bottom, left) 


但 是 我 个 人 还 是 习惯 使 用 没有 过 号 的 语法 ， 因 为 其 兼容 性 更 好 ， 
IE6 和 IE7 也 支持 ， 而 且 字 符 更 少 。 


就 顺序 而 言 ，top>right>bottom>1left 在 CSS 世 界 中 是 一 脉 相 承 
的 ， 和 margin/ border-width 等 属性 的 4 个 值 的 顺序 一 样 ， 都 是 从 top 
开始 ， 顺 时 针 旋 转 。 不 过 这 里 的 4 个 值 有 一 个 明显 不 一 样 的 地 方 ， 就 是 
不 能 缩写 ， 且 和 border-width 类 似 ， 是 不 支持 百分比 值 的 。 


那 具 体 是 如 何勇 裁 的 呢 ? 我 们 看 一 个 例子 ，CSS 如 下 : 


clip: rect(36px 266px 260pXx 26px) 


可 以 想象 ， 我 们 手中 有 一 把 剪刀 ， 面 前 有 一 块 画 布 ，rect(36px 
266px 268px 26px) 表 示 的 含义 就 是 : 距离 画布 上 边缘 38px 的 地 方 吏 





一 刀 ， 上 距离 画布 右边 缘 269px 的 地 方 剪 一刀， 距离 画布 下 边缘 266px 的 
地 方 前 一刀， 上 距离 画布 左边 缘 26px 的 地 方 剪 一 刀 。 最 终 我 们 就 得 到 一 个 
新 的 剪裁 好 的 和 拢 形 画 布 ， 如 图 6-62 所 示 。 











图 6-62 ”画布 剪裁 示意 


6.7.1 重新 认识 的 clip 属 性 


非常 多 的 人 都 不 知道 CSS 中 还 有 抱 大 腿 的 cLip 剪 裁 属 性 ， 惑 算 见 
到 ， 也 认为 它 是 一 个 非常 冷门 、 生 个 的 CSS 属 性 ， 作 用 和 价值 不 大 。 实 
际 上 ，c1lip 剪 裁 非 常 有 用 ， 在 以 下 两 种 场景 下 具有 不 可 蔡 代 的 地 位 。 














1. fixed 固 定 定 位 的 剪 坊 


对 于 普通 元 素 或 者 绝对 定位 元 素 ， 想 要 对 其 进行 剪裁 ， 我 们 可 以 利 
用 语义 更 明显 的 overflow 属 性 ， 但 是 对 于 position:fixed 元 
素 ，overflow 属 性 往往 就 力 不 能 及 了 ， 因 为 fixed 回 定 定位 元 素 的 包含 
块 是 根 元 素 ， 除 非 是 根 元 素 深 动 条 ， 普 通 元 素 的 overflow 是 根本 无 法 
对 其 进行 剪裁 的 。 怎 么 办 呢 ? 





此 时 就 要 用 到 名 不 经 传 的 clip 属 性 了 。 再 嚣张 的 固定 定位 ，clip 
属性 也 能 立马 将 它 勇 裁 得 服 服 帖 帖 的 。 例 如 : 


.fixed-clip { 
position: fixed; 


clip: rect(36px 200px 2660px 28px); 
} 





2. 最 佳 可 访问 性 隐藏 








所 谓 “ 可 访问 性 隐藏 >， 指 的 是 虽然 内 容 肉 眼看 不 见 ， 但 是 其 他 辅助 
设备 却 能 够 进行 识别 和 访问 的 隐藏 。 


举 个 例子 ， 很 多 网 站 左上 角 都 有 包含 自己 网 站 名 称 的 标识 
(logo) ， 而 这 些 标识 一 般 都 是 图 片 ， 为 了 更 好 地 SEO 以 及 无 障碍 识 
别 ， 我 们 一 般 会 使 用 <h1> 标 签 写 上 网 站 的 名 称 ， 代 码 如 下 : 





<a href="/" class="logo"> 





<h1>CSSs 世 界 </h1> 
</a> 











如 何 隐藏 <h1> 标 签 中 的 “CSS 世 界 ” 这 几 个 文字 ， 通 常 有 以 下 一 些 技 





。 下 策 是 display:none 或 者 visibility:hidden 隐 藏 ， 因 为 屏幕 阅 
读 设备 会 忽略 这 里 的 文字 。 

。 text-indent 纵 进 是 中 策 ， 但 文字 如 果 缩 进 过 大 ， 大 到 屏幕 之 外 ， 
屏幕 阅读 设备 也 是 不 会 读 取 的 。 

。 color:transparent 是 移动 端 上 策 ， 但 却 是 捆 面 端 中 策 ， 因 为 原 
生 正 8 浏览 器 并 不 支持 它 。color:transparent 声 明 ， je 
的 方式 阻止 文本 被 框 选 。 





。 cl1ip 甬 裁 隐藏 是 上 策 ， 既 满足 视觉 上 的 隐藏 ， 屏 幕 阅读 设备 等 辅助 
设备 也 文 持 得 很 好 。 


.logo hi { 


position: absolute; 
clip: rect(60 60 0 0); 








clip 剪 裁 被 我 称 为 “最 佳 可 访问 性 隐藏 * 的 另外 一 个 原因 就 是 ， 它 具 
有 更 强 的 普遍 适应 性 ， 任 何 元 素 、 任 何 场 景 都 可 以 无 障碍 使 用 。 例 如 ， 
我 定义 一 个 如 下 的 CSS 语 句 块 : 








.Clip { 
position: absolute; 
clip: rect(60 60 9 0); 





} 








就 可 以 整 站 使 用 ， 哪 里 需要 “可 访问 性 隐藏 ?就 加 一 个 类 名 .clLip 即 可 ， 

无 论 是 图 片 、 文 字 还 是 块 级 元 素 ， 都 可 以 满足 隐藏 需求 (与 文字 透明 、 
缩 进 等 方法 相 比 ) 。 同 时 ，clip 语 法 简单 ， 功 能 单一 ， 与 其 他 CSS 属 性 
相 比 ， 和 元 素 原 本 CSS 样 式 冲 突 的 概率 更 低 。 





不 仅 如 此 ， 元 素 原 本 的 行为 特性 也 很 好 用 。 例 如 ， 依 然 可 以 被 
focus， 而 且 非 常 难得 的 是 就 地 硼 裁 ， 因 为 属于 “无 依赖 的 绝对 定位 ?”。 
这 一 点 很 重要 ， 我 们 来 看 下 面 这 个 实用 案例 。 











众所周知 ， 如 果 <form> 表 单元 素 里 面 有 一 个 type 为 submit 或 
者 image 类 型 的 按钮 ， 那 么 表单 自动 有 回 车 提交 行为 ， 可 以 节约 大 量 吃 
嗓 的 键盘 相关 的 事件 的 代码 。 但 是 ，submit 类 型 按钮 在 IE7 下 有 黑 框 ， 
很 难 所 有 浏览 器 《包括 Firefox 在 内 的 浏览 器 ) UI 完 全 一 致 ， 对 视觉 呈现 




















个 一 挑战 。 于 是 就 有 了 下 面 这 个 使 用 <labe1> 元 素 李 代 桃 僵 的 经 典 


<form> 
<input type="submit" id="someID" class="clip"> 


<label for="someID"> 提 交 </1label> 
</form> 





原本 的 submit 按 钮 隐藏 ， 肉 眼 所 见 的 按钮 UI 实 际 上 是 <labe1> 标 签 
泻 染 。 由 于 <labe1l> 是 非 瞧 换 元 系 ， 没 有 内 置 的 UI， 因 此 羔 容 性 非常 
好 。 


这 里 使 用 的 clip 苞 裁 隐藏 是 我 工作 这 么 多 年 大 浪 淘 沙 往 选 后 的 最 佳 
实践 ， 有 对 比 才能 显 出 好 在 何 处 。 





。display:none 或 者 visibility:hidden 隐藏 有 两 个 问题 ， 一 个 
是 按钮 无 法 被 focus 了 ， 另 外 一 个 是 正 8 浏 览 器 下 提交 行为 丢失 ， 原 
因应 该 与 按钮 focus 特 性 丢失 有 关 。 

透明 度 6 履 盖 也 是 一 个 不 错 的 实践 。 如 果 是 移动 端 项 目 ， 建 议 这 人 么 
做 ; 但 如 果 是 柬 面 端 项 目 ， 则 完全 没有 必要 。 使 用 透明 度 6 履 盖 的 
问题 是 每 一 个 场景 都 需要 根据 环境 的 不 同 重 新 定位 ， 以 保证 点 击 区 
域 的 准确 性 ， 成 本 较 高 ， 但 clip 隐 藏 直接 用 一 个 类 名 加 一 下 就 好 。 
。 还 有 一 种 比较 具有 适用 性 的 “可 访问 隐藏 "是 下 面 这 种 屏幕 外 隐藏 ; 

















.abs-out { 
position: absolute; 


left: -999px; top: -999px; 
} 





然而 ， 在 本 例 中 ， 会 出 现 一 个 比较 麻烦 的 问题 。 在 6.4 闻 讲 过 ， 当 





一 个 控件 元 素 被 focus 的 时 候 ， 浏 览 絮 会 自动 改变 深 动 局 有 度 ， 让 这 个 控 
件 元 系 在 屏幕 内 显示 。 假 如 说 我 们 的 <label>“ 提 交 ” 按 钮 在 第 二 屏 ， 则 
扩 击 按钮 的 时 候 浏 览 费 会 自动 跳 到 第 一 屏 置 项 ， 因 为 按钮 隐藏 在 了 屏 医 
外 ， 于 是 发 生 了 非常 粳 糕 的 体验 问题 。 而 c1ip 就 地 勇 裁 ， 就 不 会 有 “页 
面 跳动 ”的 体验 问题 。 于 是 ， 权 衡 成 本 和 效果 ，c1lip 隐 藏 成 为 了 最 佳 选 
择 ， 特 别 是 对 于 果 面 端 项 目 。 











6.7.2 深入 了 解 clip 的 演 染 





上 面 关 于 clip 的 知识 多 浮 于 表层 ， 如 来 我 们 进一步 深入 ， 去 尝试 了 
解 cLip 属 性 是 如 何 泻 染 的 ， 就 会 发 现 一 些 有 意思 的 事情 ! 


我 们 先 看 一 个 示例 : 


.box { 
width: 366px; height: 166pX; 
background-color: #f6f3f9; 
position: relative; 
overflow: auto; 


} 

.box > img { 
width: 256px; height: 192px; 
position: absolute; 


} 








此 时 .box 为 定位 元 素 ， 因 此 ， 深 动 条 显示 得 很 好 ， 如 图 6-63 所 示 。 
如 果 对 图 片 进行 clip 檀 裁 ， 那 效果 又 将 怎样 呢 ? 


.box > img { 
width: 256px; height: 192px; 


position: absolute; 
clip: rect(60 8 0 0); 
} 





图 片 显然 看 不 见 了 ， 但 是 注意 ， 在 Chrome 浏 览 器 下 ，.box 元 素 的 
深 动 条 依旧 存在 ， 如 图 6-64 所 示 。 








图 6-63 ”绝对 定位 图 片 可 滚动 


bd 


图 6-64 ” ”Chrome 下 绝对 定位 图 片 clip 隐 藏 后 依旧 可 滚动 


这 个 现象 很 有 意思 ， 它 说 明 ， 人 至 少 在 Chrome 浏 览 嚣 下，c1lip 仪 仅 

是 决定 了 哪 一 部 分 是 可 见 的 ， 对 于 原来 占据 的 空间 并 无 影响 。 然 而 ， 并 

不 是 所 有 浏览 器 都 这 么 认为 ， 在 正和 Firefox 浏 览 器 下 是 没有 滚动 条 的 ， 

只 有 光秃秃 的 一 小 撮 背 景色 在 那里 。 这 又 是 “未 定义 行为 ”的 表现 ， 看 起 
来 了 和 Firefox 对 于 cl1ip 泻 染 采 用 的 是 另外 的 方式 。 














但 是 无 论 怎样 ， 下 面 这 些 特性 大 家 的 认识 都 是 一 致 的 ; 使 用 clip 进 
J 剪裁 的 元 素 其 clientwidth 和 clientHeight 包 括 样式 计算 的 宽 高 
还 是 原来 的 大 小 ， 从 这 一 点 看 ，Chrome 的 泻 染 似乎 更 合理 。 虽 然 尺 寸 
还 是 原来 的 尺寸 但是， 隐藏 的 区 域 是 无 法 影响 我 们 的 点 击 行为 的 ， 说 
明 clip 隐 藏 还 是 很 干脆 的 。 








最 后 总 结 一 下 : clip 隐藏 仪 仅 是 决定 了 哪 部 分 是 可 见 的 ， 非 可 见 部 








分 无 法 啊 应 点 击 事件 等 ， 然 后 ， 虽 然 视 觉 上 隐藏 ， 但 是 元 素 的 尺寸 依然 
是 原本 的 尺寸 ， 在 正 浏 览 器 和 Firefox 浏 览 器 下 抹 掉 了 不 可 见 区 域 尺 寸 对 
布局 的 影响 ，Chrome 浏 览 嚣 却 保 留 了 。 





Chrome 浏 览 器 的 这 种 特性 表现 实际 上 让 clip 隐 藏 有 了 瑕 站 ， 好 在 
通常 使 用 场景 是 看 不 到 这 个 差异 的 ， 故 影响 甚 微 。 


6.8 ” absolute 的 流体 特性 


6.8.1 ” 当 absolute 人 过 到 left/top/right/bottom 届 性 


当 absolute 遇 到 left/top/right/bottom 属 性 的 时 
候 ，absolute 元 素 才 真正 变 成 绝对 定位 元 素 。 例 如 ; 





.box { 
position: absolute; 


left: 8; top: 60; 





} 
表示 相对 于 绝对 定位 元 素 包 含 块 的 左上 和 角 对 齐 ， 此 时 原本 的 相对 特性 丢 


失 。 但 是 ， 如 果 我 们 仅 设 置 了 一 个 方 同 的 绝对 定位 ， 又 会 如 何 呢 ? 例 
如 : 





.box { 
position: absolute; 
left: ©@; 

} 








此 时 ， 水 平方 向 绝对 定位 ， 但 垂直 方向 的 定位 依然 保持 了 相对 特性 。 
6.8.2 ” absolute 的 流体 特性 


说 到 流体 特性 ， 我 们 通常 第 一 反应 就 是 cdiv> 之 类 的 普通 块 级 元 
素 。 实 际 上 ， 绝 对 定位 元 素 也 具有 类 似 的 流体 特性 ， 当 然 ， 不 是 默认 就 
有 的 ， 而 是 在 特定 条 件 下 才 具 有 ， 这 个 条 件 就 是 “对 立方 向 同时 发 生 定 
位 的 时 候 ”。 











left/top/right/bottom 是 具有 定位 特性 元 素 专 用 的 CSS 属 性 ， 








其 中 left 和 Pright 属 于 水 平 对 立定 位 方向 ， 而 top 和 bottom 属 于 垂直 对 
并 定位 方向 。 








当 一 个 绝对 定位 元 素 ， 其 对 立定 位 方向 属性 同时 有 具体 定位 数值 的 
时 候 ， 流 体 特性 就 发 生 了 。 例 如 : 


<div class="box"></div> 
.box { 


position: absolute; 
left: 8; right: 6; 


} 





如 果 只 有 1left 属 性 或 者 只 有 right 属 性 ， 则 由 于 包 计 性， 此 时 .box 
宽度 是 6。 但 是 在 本 例 中 ， 因 为 left 和 right 同 时 存在 ， 所 以 宽度 就 不 
是 6， 而 是 表现 为 “格式 化 宽度 ”， 宽 度 大 小 上 自 适 应 于 .box 包 含 块 的 
padding box， 也 束 是 说 ， 如 果 包 含 块 padding box 宽 上 度 发 生变 化 ，.box 的 
宽度 也 会 跟着 一 起 变 。 








因此 ， 假 设 .box 元 素 的 包含 块 是 根 元 素 ， 则 下 面 的 代码 可 以 
让 .box 元 素 正 好 完全 履 盖 浏览 器 的 可 视窗 口 ， 并 且 如 果 改 变 浏 览 右 窗口 
大 小 ，.box 会 自动 跟着 一 起 变化 : 


.box { 
position: absolute; 


left: 8; right: 6; top: 6;j bottom: ©; 
} 





绝对 定位 元 系 的 这 种 流体 目 适 应 特性 从 匡 7 就 开始 文 持 了 ， 但 是 出 
于 历史 习惯 或 者 其 他 什么 原因 ， 很 多 同行 依然 使 用 下 面 这 样 的 写法 : 


.box { 
position: absolute; 








left: 6; top: 60; 
width: 166%; height: 166%; 
} 





好 像 也 能 履 盖 浏览 器 的 可 视窗 口 ， 并 且 用 得 挺 好 。 那 问题 来 了 : 
两 种 实现 有 什么 区 别 呢 ? 


乍 一 看 ， 效 果 都 是 一 样 的 ， 但 是 骨子里 却 已 经 严重 分 化 了 。 后 者 ， 
也 束 是 设 定 宽 高 都 是 166% 的 那个 .box， 实 际 上 已 经 完全 丧失 了 流动 
性 ， 我 们 可 以 通过 添加 简单 的 CSS 声 明 让 大 家 一 眼 就 看 出 差别 。 例 如 ， 
对 两 者 都 添加 padding:38px: 














.box { 
position: absolute; 
left: 8; right: 6; top: 68; bottom: ©; 
padding: 36pX; 
} 
.box { 
position: absolute; 
left: 6; top: 60; 
width: 166%; height: 166%; 
padding: 36pX; 
} 








前 者 此 时 宽 高 依然 是 窗 体 可 视 区 域 的 宽 高 ， 但 是 ， 后 者 此 时 的 尺寸 
是 166%+66pXx， 多 出 了 66px。 有 人 可 能 会 立马 想到 使 用 box- 
sizing:border-box， 这 样 确实 可 以 让 padding 表 现 保持 一 致 ， 但 是 ， 
如 果 添 加 的 是 margin:36px 呢 ? 





.box { 
position: absolute; 
left: 8; right: 6; top: 6;j bottom: ©; 
margin: 306px; 
} 
.box { 
position: absolute; 
left: 6; top: ©@; 


width: 166%; height: 166%; 
margin: 36pXx 








前 者 自动 上 下 左右 留 白 38px， 但 是 后 者 的 布局 已 经 跑 到 窗 体外 面 去 
了 ， 并 不 支持 margin box 的 pox-sizing 此 时 也 无 能 为 力 。 





通过 上 面 几 个 例子 可 以 看 到 ， 设 置 了 对 立定 位 属性 的 绝对 定位 元 素 
的 表现 神似 普通 的 <div> 元 素 ， 无 论 设置 padding 还 是 margin， 其 占据 
的 空间 一 直 不 变 ， 变 化 的 就 是 content box 的 尺寸 ， 这 就 是 典型 的 流体 表 
现 特性 。 

















所 以 ， 如 末 想 让 绝对 定位 元 素 宽 高 目 适应 于 包含 块 ， 没 有 理由 不 使 
用 流体 特性 写法 ， 除 非 是 符 换 元 素 的 拉 伸 。 而 绝对 定位 元 素 的 这 种 流体 
特性 比 普 通 元 系 要 更 强大 ， 普 通 元 系 流 体 特性 只 有 一 个 方 辐 ， 默 认 是 水 
平方 向 ， 但 是 绝对 定位 元 素 可 以 让 和 对 直方 向 和 水 平方 向 同时 保持 流动 
性 。 





有 人 可 能 还 没 意 识 到 垂直 方 同 也 保持 流动 性 的 好 处 ， 实 际 上 ， 其 对 
我 们 的 布局 非常 有 价值 。 举 个 最 简单 的 例子 ， 因 为 子 元 素 的 height 百 
分 比值 可 以 生效 了 《〈IE8 及 以 上 版 本 浏览 器 ) ， 所 以 高 度 目 适应 、 高 度 
等 比例 布局 等 效果 都 可 以 从 容 实现 了 。 











6.8.3 ” absolute 的 margin:auto 拓 中 

当 绝 对 定位 元 素 处 于 流体 状态 的 时 候 ， 各 个 盒 模型 相关 属性 的 解析 
和 普通 流体 元 素 都 是 一 模 一 样 的 ，margin 负 值 可 以 让 元 系 的 尺寸 更 
大 ， 并 且 可 以 使 用 margin:auto 让 绝对 定位 元 素 保持 居中 。 








绝对 定位 元 素 的 margin:auto 的 填充 规则 和 普通 流体 元 素 的 一 模 一 
样 : 


。 如 果 一 侧 定 值 ， 一 侧 auto，auto 为 剩余 空间 大 小 ; 
。 如果 两 侧 均 是 auto， 则 平分 剩余 空间 。 


唯一 的 区 别 在 于 ， 绝 对 定位 元 素 margin:auto 居 中 从 IE8 浏 览 器 开 
始 支持 ， 而 普通 元 素 的 margin:auto 居 中 很 早 就 支持 了 。 





如 果 项 目 不 需 要 管 正 7 浏览 嚣 的话， 下面 这 种 绝对 定位 元 素 水 平 牌 
直 居 中 用 法 就 可 以 直接 淘汰 了 : 





.element { 
width: 366px; height: 266pX; 
position: absolute; left: 56%; top: 56%; 





margin-left: -150px; /* 宽度 的 一 半 */ 
margin-top: -100px; /* 高 度 的 一 半 */ 





} 








如 果 绝 对 定位 元 素 的 尺寸 是 已 知 的 ， 也 没有 必要 使 用 下 面 这 种 用 
法 ， 因 为 按照 我 的 经 验 ， 在 有 些 场 景 下 ， 百 分 比 transform 会 让 iOS 微 
信 闪 退 ， 还 是 尽量 避免 的 好 。 





.element { 
width: 366px; height: 266pX; 


position: absolute; left: 56%; top: 56%; 
transform: translate(-56%, -506%); /* 56% 为 自身 尺寸 的 一 半 */ 








} 








首 推 的 方法 就 是 利用 绝对 定位 元 素 的 流体 特性 和 margin:auto 的 自 
动 分 配 特 性 实现 居中 ， 例 如 : 


.element { 


width: 366px; height: 266pX; 
position: absolute; 

left: 8; right: 6; top: 6;j bottom: ©; 
margin: auto; 





具体 分 配 细 节 在 4.3 节 已 经 详细 解释 ， 这 里 不 再 袭 述 。 





我 可 以 负责 任 地 告诉 大 家 ， 这 种 方法 非常 好 用 ， 层 试 不 夹 。 


6.9 ” position:relLlative 才 是 大 哥 





如 果 说 float 和 absolute 是 同 父 异 母 的 兄弟 关系 ， 那 么 
position:relative (下 面 简称 relative) 则 是 absolute 的 亲 大 哥 。 


故事 是 这 样 的 : 当年 魔界 圣母 position 生 了 好 几 个 儿子 ， 其 中 一 
个 就 是 法 力 很 强 也 很 霸道 的 absolute， 考 虑 到 日 后 absolute 会 
找 float 的 麻烦 而 去 正常 流 世 界 ， 以 其 个 性 和 霸道 的 能 力 ， 一 定 会 影响 
正常 流 世 界 的 秩序 ， 于 是 圣母 position 让 其 性 格 敦 实 的 大 儿 
子 relative 直 接 在 正常 流 世 界 生 活 ， 帮 忙 上 时 着 absolute， 不 要 让 
absolute 这 个 小 魔鬼 到 处 卷 是 生 非 。 





知道 了 故事 背景 ， 对 relative 的 诸多 特性 我 们 就 很 好 理解 了 。 
6.9.1 relative 对 absolute 的 限制 


虽然 说 relative/absolute/fixed 都 能 对 absolute 的 “包裹 性 ”以 
及 “定位 * 产 生 限制 ， 但 只 有 relative 可 以 让 元 素 依 然 保持 在 正常 的 文 
档 流 中 。 就 好 像 虽然 唐僧 、 观 世 音 菩萨 、 如 来 佛祖 都 能 限制 孙悟空 ， 但 
只 有 唐僧 是 凡 界 中 的 凡人 ， 可 以 不 动 声色 地 把 孙悟空 驯 教 得 服 服 帖 帖 。 


下 面 举 个 简单 例子 示意 一 下 relative 对 absolute 的 限制 。 下 面 的 
CSS 代 码 之 前 出 现 过 ， 是 冲 着 覆盖 整个 浏览 器 可 视窗 体 去 的 ， 这 出 手 甚 





.box { 
position: absolute; 
left: 68; right: 6; top: 6;j bottom: ©; 


?| 
现在 有 如 下 的 小 图 标 样式 : 


.Icon { 
width: 26px; height: 28px; 


position: relative; 


} 





并 且 HTML 结 构 关 系 如 下 : 


<div class="icon"> 
<div class="box"></div> 


</div> 





请 问 ， 此 时 .box 尺 寸 多 少 ? 





原本 霸气 的 窗 体 尺寸 一 下 子 被 限制 到 这 里 的 小 不 溜 丢 的 
26pxx26px， 瞬 间 从 天 上 掉 到 地 上 。 最 根本 的 原因 是 ， 此 时 .box 元 素 的 
包含 块 变 成 了 .icon。 

6.9.2 relative 与 定位 


relative 的 定位 有 两 大 特性 : 一 是 相对 自身 ， 二 是 无 侵入 。 


故事 继续 。 话 说 absolute 被 relative 限 制 得 没 脾气 ， 于 是 便 想 尽 
想 办 法 要 套套 其 大 哥 relative 的 技能 ， 看 看 有 没有 什么 漏洞 可 钻 。 





于 是 ， absolute 跑 过 去 找 relative， 一 番 寒 瞪 后 开口 道 : “大 
哥 ， 听 三 弟 说 你 定位 技能 和 我 们 不 一 样 ， 我 想 看 看 ..…….. eR 





“可 以 啊 ， 难 得 你 主动 找 我 ! ”relative 毫 不 犹豫 地 答 道 。 


“ 那 好 ， 我 数 一 二 三 ， 然 后 我 们 同时 top :6; left:6 瞬 映 定 位 。” 
“好 ! 3?? 
Re 


只 听 “ 咱 ?的 一 声 ，absolute 了 瞬间 跑 到 了 结 界 的 左上 角 ， 很 是 得 
意 ， 此 时 absolute 发 现 其 大 哥 依 然 原 地 不 动 ， 心 想 可 能 是 大 哥 技能 发 
动 时 间 比 较 长 吧 。 然 后 5 分 钟 过 去 了 ，absolute 实 在 忍 不 住 了 : “大 
哥 ， 你 怎么 还 不 定位 啊 ? ” 


“你 在 扯 什么 啊 ， 我 早 就 已 经 left:6;top:6 定 位 了 啊 ! ” 


absolute 的 额头 上 瞬间 挂 下 来 5 条 黑 线 和 一 滴 计 。 他 组 了 组 自己 的 
篮 人 类， 继续 道 : “ 那 我 们 换 成 同时 top :166px;1left:166px 定 位 吧 ! ” 


“可 以 蚜 ! ” 
“ 那 好 ， 本 开始 ! 外 


只 听 “ 咱 "的 一 声 ，absolute 瞬 间 跑 到 了 结 界 的 左上 角 166px 的 地 
方 ， 回 头 一 看 大 哥 ， 只 见 其 慢 悠悠 地 往 右 侧 和 下 方 各 移动 了 168px ( 见 
图 6-65) ! absolute 立 马 紧 起 来 大 拇指 : “原来 大 哥 定 位 是 这 样子 的 
呀 ， 是 相对 于 自身 进行 偏 移 定位 的 ， 小 第 我 学 习 了 ! ” 

















“其 实 不 眶 你 次， 这 是 为 了 限制 你 ， 我 特意 练 就 的 定位 ， 虽 然 活 动 
半径 小 了 点 儿 ， 但 是 为 了 看 好 你 ， 这 点 儿 牺 牲 是 值得 的 。 也 正 因为 这 
个 ， 我 被 世人 称 为 "相对 定位 *。?” 








4 文 ，， absolute 的 额头 上 瞬间 又 多 了 几 根 黑 线 。 


“无 侵入 ”的 意思 是 ， 当 relative 进 行 定 位 偏 移 的 时 候 ， 一 般 情 况 
下 不 会 影响 周围 元 素 的 布局 。 








故事 继续 。absolute 后 来 仔细 回想 大 哥 的 定位 技能 ， 总 觉得 在 哪 
里 见 过 ， 后 来 总 算 想 起 来 ， 好 像 激进 的 margin 属 性 定位 跟 大 哥 的 很 
像 ， 这 事情 有 必要 验证 一 下 。 于 是 数 日 后 ，absolute 威 盘 利诱 margin 


前 来 和 relative 进 行 切磋 ， 而 上 自己 则 舱 在 暗中 观察 。 














relative 敦 实 厚 重 ， 与 人 为 善 ， 看 margin 前 来 自然 非常 欢迎 ， 于 
是 ， 就 有 了 下 面 切磋 的 一 幕 ， 同 时 往 上 偏 移 58px。 





切磋 开始 之 前 ， 大 家 位 置 什么 的 都 是 一 样 的 ， 如 图 6-66 所 示 。 
left:1OOpx 


top:iOOpx 














图 6-65 ”相对 自身 定位 偏 移 示意 


使 用 margin 定 位 使 用 relative 定 位 





点 击 图 片 应 用 .pk-1 点 击 图 片 应 用 .pk-2 


图 6-66 ” margin/relative 定 位 的 初始 态 对 比 
margin 使 用 的 CSS 如 下 : 


.pk-1 { 
margin-top: -560pX; 


relative 则 是 : 


.pk-2 { 
position: relative; 


top: -56px; 
} 





作用 于 图 片上 ， 结 果 从 视觉 效果 看 ， 图 片 最 终 定位 的 位 置 是 一 样 
的 ， 但 是 ， 图 片 后 面 的 元 素 却 表现 出 了 明显 的 差异 : margin 定 位 的 图 
片 后 面 的 文字 跟着 上 来 了 ， 而 使 用 relative 定 位 的 图 片 后 面 的 文字 依 
然 在 原 地 纹 丝 不 动 ， 中 间 区 域 留 出 了 一 大 块 空 白 ， 如 图 6-67 押 示 。 眼 见 
为 实 ， 手 动 输入 http://demo.cssworld.cn/6/6-1.php 或 者 扫 下 面 的 二 维 码 。 














点 击 图 片 应 用 .pk-1 运 在 原来 贸 于 
Fr a 


叭 看 轩 片上 去 了 点 击 图 片 应 用 .pk-2 
图 6-67 margin/relative 定 位 对 比 
relative 的 定位 还 有 男 外 两 点 值得 一 提 : 相对 定位 元 素 的 
left/top/right/bottom 的 百分比 值 是 相对 于 包含 块 计算 的 ， 而 不 是 
自身 。 注 意 ， 虽 然 定 位 位 移 是 相对 上 自身 ， 但 是 百分比 值 的 计算 值 不 是 。 








top 和 bottom 这 两 个 算 直 方向 的 百分比 值 计 算 跟 height 的 百分比 
值 是 一 样 的 ， 都 是 相对 高 度 计算 的 。 同 时 ， 如 果 包 含 块 的 高 度 是 auto， 
那么 计算 值 是 e， 偏 移 无 效 ， 也 就 是 说 ， 如 果 父 元 素 没 有 设 定 高 度 或 者 
不 是 “格式 化 高 度 "”， 那 么 relative 类 似 top :26% 的 代码 等 同 于 top :6。 




















当 相 对 定位 元 素 同 时 应 用 对 立方 向 定位 值 的 时 候 ， 也 就 
是 top/bottom 和 left/right 同 时 使 用 的 时 候 ， 其 表现 和 绝对 定位 差异 
很 大 。 绝 对 定位 是 尺寸 拉 伸 ， 保 持 流体 特性 ， 但 是 相对 定位 却 是 “你 死 
我 活 ” 的 表现 ， 也 就 是 说 ， 只 有 一 个 方 同 的 定位 属性 会 起 作用 。 而 就 强 
训 弱 则 是 与 文档 流 的 顺序 有 关 的 ， 默 认 的 文档 流 是 自 上 而 下 、 从 左 往 
右 ， 因 此 top/bottom 同 时 使 用 的 时 候 ，bottom 被 干 挥 ; left/right 
同时 使 用 的 时 候 ，right 狂 命 。 

















.example { 
position: relative; 
top: 16px; 


right: 16px; /* 无 效 */ 
bottom: 16px; /* 无 效 */ 
left: 16px; 


} 





6.9.3 relative 的 最 小 化 影响 原则 














“relative 的 最 小 化 影响 原则 ”是 我 自己 总 结 的 一 套 更 好 地 布局 实 
践 的 原则 ， 主 要 分 为 以 下 两 部 分 : 





(1) 尽量 不 使 用 relative， 如 果 想 定位 某 些 元 系 ， 看 看 能 否 使 
用 “无 依赖 的 绝对 定位 ”; 





(2) 如 果 场 景 受 限 ， 一 定 要 使 用 relative， 则 该 relative 务 必 
最 小 化 。 








第 一 点 前 文 有 重点 介绍 ， 应 该 很 好 理解 ， 关 键 是 第 二 


点 ，“relative 最 小 化 ”是 什么 意思 ? 


我 们 可 以 看 一 个 简单 的 例子 。 例 如 ， 我 们 希望 在 某 个 模块 的 右上 和 角 
定位 一 个 图 标 ， 初 始 HTML 结 构 如 下 : 


<div> 


<img src="icon.png"> 
<p> 内 容 1</py> 
<p> 内 容 2</py> 


<p> 内 容 3</py> 
<p> 内 容 4</py> 








</div> 


如 果 让 大 家 去 实现 的 话 ， 我 估计 十 有 八 九 都 会 如 下 面 这 样 实现 : 





<div style="position:relative;"> 
<img src="icon.png”style= 


"position:absolute;top:6;right:6; "> 
<p> 内 容 1</py> 
<p> 内 容 2</py> 
<p> 内 容 3</py> 
<p> 内 容 4</py> 





</div> 





但 是 ， 如 果 采 用 “relative 的 最 小 化 影响 原则 ” 则 应 该 是 如 下 面 这 
般 实现 : 


<div> 
<div style="position:relative;"> 
<img src="icon.png" style="position:absolute;top:0;right:06;"> 

</div> 

<p> 内 容 1</py> 

<p> 内 容 2</py> 

<p> 内 容 3</py> 

<p> 内 容 4</py> 





</div> 





差别 在 于 ， 此 时 relative 影 响 的 元 素 只 是 我 们 的 图 标 ， 后 面 的 “内 
容 1” 之 类 的 元 系 依 然 保 持 开始 时 干净 的 状态 。 





有 人 可 能 会 有 疑问 : 为 什么 要 多 此 一 举 呢 ? 之 前 的 实现 效果 人 蛋 好 
的 ， 大 家 部 这 么 使 用 的 ， 不 照样 脸 上 洋 洲 看 灿烂 的 笑容 ! 





真 的 是 这 样 吗 ?我 想 大 家 或 多 或 少 都 经 历 过 一 些 关 于 层级 的 问题 ， 
在 大 部 分 场景 下 ， Se 差异 ， 但 是 页 面 一 旦 复 
杂 ， 第 一 种 实现 方法 就 会 留 下 隐患 。 因 为 一 个 普通 元 素 变 成 相对 定位 元 
素 ， 看 上 去 长 相 什么 的 没有 变化 ， et 
甚至 在 IE6 和 IE7 浏 览 器 下 无 须 设置 z-index 就 直接 创建 了 新 的 层 且 上 下 
文 ， 会 导致 一 些 绝 对 定位 浮 层 无 论 怎么 设置 z-index 都 会 被 其 他 元 素 宪 























盖 。 当 然 ，z-index 无 效 已 经 算是 比较 严重 的 问题 了 。 





这 里 我 们 不 妨 看 一 个 看 似 无 伤 大 雅 的 小 问题 。 场 景 是 这 样 的 ; A 模 
块 下 方 有 一 个 "也 模块 ?， 这 个 “B 模 块 ? 设 置 了 margin-top:-166px， 币 
望 可 以 履 善 “A 模 块 ” 后 面 的 部 分 内 容 ， 此 时 两 种 实现 的 差异 就 显现 出 来 
本 和 





如 果 是 前 面 position:relative 设 置 在 容器 上 的 实现 ， 会 发 现 “B 
模块 "并 没有 和 窗 产 “A 模块 "反而 是 被 “A 模块 ” 履 产 了 ! 原因 很 简单 ， 相 
比 普 通 元 素 ， 相 对 定位 元 系 的 层 营 顺 序 是 “多 冀 ” 级 别 的 ， 自 然 “A 模 
块 ? 要 履 善 “B 模 块 >。 如 有 果 要 想 实 现 目标 效果 ， 束 需要 给 “"B 模 块 ? 也 设 
置 position:relative。 唉 ， 冤 冤 相 报 何 时 了 ? 








但 是 ， 如 采 是 后 面 “relative 的 最 小 化 影响 原则 ?的 实现 ， 由 于 
relative 只 影响 右上 和 角 的 图 标 ,“A 模 块 ” 后 面 的 内 容 都 还 是 普通 元 素 ， 
那么 ， 最 终 的 效果 就 是 我 们 希望 的 “B 模 块 ” 履 新 “A 模块 "， 不 动 一 兵 一 卒 
就 达到 了 预期 目的 ， 岂 不 爽 哉 ! 











“relative 的 最 小 化 影响 原则 ?不 仅 规避 了 复杂 场景 可 能 出 现 样式 
问题 的 隐患 ， 从 日 后 的 维护 角度 讲 也 更 方便 ， 比 方 说 过 了 一 个 月 ， 我 们 
不 需要 右上 角 的 图 标 了 ， 直 接 移 除 这 个 relative 最 小 化 的 单元 即 可 ! 
但 是 ， 如 果 relative 是 这 个 容器 上 的 ， 这 段 样 式 代 码 你 敢 删 吗 ? 万 一 
其 他 元 素 定位 也 需要 呢 ? 万 一 relative 还 有 提高 层 倒 顺 序 的 作用 呢 ? 
留 着 没 问 题 ， 删 掉 可 能 出 bug， 我 想 大 多 数 的 开发 者 一 定 会 留 着 的 ， 这 
也 是 为 什么 随 着 项 目 进程 的 推进 代码 会 越 来 越 元 余 的 原因 。 











从 这 一 点 可 以 看 出 来 ， 项 目 代码 越 来 越 爱 有 种 、 越 来 越 元 余 ， 归 根 结 


底 还 是 一 开始 实现 项 目的 人 的 技术 水 平和 能 力 火候 还 不 够 。 实 现时 “ 洋 
溢 独 灿烂 的 笑容 ? 设 什 么 好 得 意 的 ， 能 够 让 日 后 维护 甚至 其 他 人 接手 项 
目 维护 的 时 候 也 “ 洋 洪 着 灿烂 的 笑容 >”， 那 才 是 真 历 害 ! 








6.10 ”强悍 的 position:fixed 固 定 定位 


定位 属性 值 三 兄弟 的 老 三 position :fixed 固 定 定位 是 三 人 中 最 强 
悍 的 ， 一 副 天 不 怕 地 不 怕 的 感觉 ， 主 要 表现 为 把 absolute 管 得 服 服 帖 
帖 的 relative 对 fixed 是 一 点 儿 办 法 都 没有 ， 普 通 元 素 想 要 
overflow:hidden 剪 裁 position:fixed 也 是 痢 人 说 梦 。 固 定 定位 之 所 
以 这 么 强悍 ， 根 本 原本 是 其 "包含 块 ? 和 其 他 元 素 不 一 样 。 








6.10.1 position:fixed 不 一 样 的 “包含 块 ” 


position:fixed 固 定 定 位 元 素 的 “包含 块 ” 是 根 元 素 ， 我 们 可 以 将 
其 近似 看 成 <htm1> 元 素 。 换 名 话说 ， 唯 一 可 以 限制 固定 定位 元 素 的 就 
是 <htm1> 根 元 素 ， 而 根 元 素 就 这 么 一 个 ， 也 就 是 全 世界 只 有 一 个 人 能 
限制 position:fixed 元 素 ， 可 见 人 家 强悍 还 是 有 强悍 的 资本 的 。 








所 以 ， 如 果 想 把 茶 个 元 素 固定 定位 在 茶 个 模块 的 右上 角 ， 下 面 这 种 
做 法 是 没有 用 的 : 


<div class="father"> 
<div class="son"></div> 
</divy> 
.father { 
width: 366px;j height: 266pX; 
position: relative; 


.Son { 
width: 46px; height: 46px; 
position: fixed; 
top: 6; right: 6; 

} 





. Son 元 素 只 会 跑 到 窗 体 的 右上 角 ， 是 不 会 在 .father 的 右上 角 
的 ，relative 对 fixed 定 位 没有 任何 限制 作用 。 


但 是 ， 并 不 是 说 我 们 无 法 把 . son 元素 精 确定 位 到 .father 的 右上 
角 ， 事 实 上 是 可 以 实现 的 ， 如 何 实现 呢 ? 


和 “无 依赖 的 绝对 定位 ?类 似 ， 就 是 “无 依赖 的 固定 定位 ?>， 利 
用 absolute/fixed 元 素 没 有 设置 left/top/right/bottom 的 相对 定 
位 特性 ， 可 以 将 目标 元 素 定 位 到 我 们 想 要 的 位 置 ， 人 处 理 如 下 : 


<div class="father"> 
<div class="right"> 
&nbsp;<div class="son"></div> 
</div> 
</div> 
.father { 
width: 366px; height: 266pX; 
position: relative; 


} 
.right { 


height: ©; 
text-align: right; 
overflow: hidden; 

} 

.Son { 
display: inline; 
width: 46px; height: 46px; 
position: fixed; 
margin-left: -46px; 





} 


6.10.2 ”position:fixed 的 absolute 模 拟 





有 时 候 我 们 希望 元 系 既 有 不 跟随 深 动 的 固定 定位 效果 ， 又 能 被 定位 
元 素 限 制 和 精准 定位 ， 那 该 怎么 办 呢 ? 


我 们 可 以 使 用 position:absolute 进 行 模拟 ， 原 理 其 实 很 简单 : 
页 面 的 滚动 使 用 普通 元 素 替 代 ， 此 时 滚动 元 素 之 外 的 其 他 元 素 自然 就 有 
了 “固定 定位 ”的 效果 了 。 


常规 的 HTML 结 构 和 和 CSS 代码 是 下 面 这 样 的 : 


<html> 
<body> 
<div class="fixed"><div> 
</body> 


</html> 
.fixed { 
position: fixed; 


} 





使 用 position:absolute 进 行 模拟 则 需要 一 个 滚动 容器 ， 假 设 类 
名 是 .page， 则 有 : 


<htm]> 
<body> 
<div class="page"> 固 定 定 位 元 素 <div> 
<div class="fixed"><div> 
</body> 
</html> 
html, body { 
height: 166%; 
overflow: hidden; 
} 
.page { 
height: 166%; 
overflow: auto; 
} 
.fixed { 
position: absolute; 


} 








整个 网 页 的 滚动 条 由 .page 元 素 产 生 ， 而 非 根 元 素 ， 此 时 .fixed 元 
素 虽 然 是 绝对 定位 ， 但 是 并 不 在 滚动 元 素 内 部 ， 上 自然 滚动 时 不 会 跟随 ， 








如 同 固 定 定位 效果 ， 同 时 本 身 绝 对 定位 。 因 此 ， 可 以 使 用 relative 进 
行 限 制 或 者 overflow 进 行 裁剪 等 。 











然而 ， 将 网 页 的 窗 体 滚动 变 成 内 部 滩 动 ， 很 多 窗 体 滚动 相关 的 小 
JavaScript 组 件 需要 跟着 进行 调整 ， 并 且 可 能 会 丢失 其 他 一 些 浏览 嚣 内置 
行为 ， 需 要 谨慎 使 用 。 





6.10.3 position:fixed 与 背景 锁定 





蒙 层 弹 窗 是 网 页 中 第 见 的 交互 ， 其 中 黑色 半 透 明 全 屏 履 善 的 花 层 基 
本 上 都 是 使 用 position: fixed 定 位 实现 的 。 但 是 ， 如 果 细 致 一 点 儿 
就 会 发 现 蒙 层 无 法 覆盖 浏览 器 右 侧 的 滚动 栏 ， 并 且 鼠 标 滚 动 的 时 候 后 面 
的 背景 内 容 依然 可 以 被 滚动 ， 并 没有 被 锁定 ， 体 验 略 打折 扣 。 








如 条 而 望 背景 锁定 ， 访 如何 实现 呢 ? 


要 想 解 决 一 个 问题 ， 可 以 从 发 生 这 个 问题 的 原因 入 
手 。position:fixed 蒙 层 之 所 以 出 现 背 景 依然 深 动 ， 那 是 因为 深 动 元 
素 是 根 元 素 ， 正 好 是 position:fixed 的 “包含 块 "”。 所 以 ， 如 果 和 希望 背 
景 被 锁定 ， 可 以 借鉴 “absolute 模 拟 fixed 定 位 ”的 思路 ， 让 页 面 滚动 条 
由 内 部 的 普通 元 际 产 生 即 可 。 














如 果 网 站 的 滚动 结构 不 方便 调整 ， 则 需要 借助 JavaScript 来 实现 锁 
定 。 

如 果 是 移动 端 项 目 ， 阻 止 touchmove 事 件 的 默认 行为 可 以 防止 滚 
动 ; 如 果 是 昌 面 端 项 目 ， 可 以 让 根 元 素 直 接 overflow:hidden。 但 
是 ，Windows 操 作 系统 下 的 浏览 右 的 滚动 条 都 是 占据 一 定 宽 度 的 ， 滚 动 








条 的 ee 然 会 导致 页 面 的 可 用 宽度 变化 ， 页 面 会 产生 体验 更 糟糕 的 胸 
动 问题 ， 那 怎么 办 呢 ? 很 简单 ， 我 们 只 需要 找 个 东西 填补 消失 的 滚动 条 
束 好 了 。 0 这 时 候 就 轮 到 功勋 军 越 的 border 属 
性 出 马 了 一 一 消失 的 滚动 条 使 用 同等 宽度 的 透明 边框 填充 ! 





于 是 ， 在 蒙 层 显示 的 同时 执行 下 面 的 JavaScript 代 码 ; 


var widthBar = 17, root = document .documentE1Lement ; 
if (typeof window.innerWidth == 'number') { 
widthBar = window.innerWidth - root.clientWidth; 


} 


root.style.overflow = 'hidden'; 
root.style.borderRight = widthBar + "px solid transparent'; 





隐藏 的 时 候 执行 下 面 的 JavaScript 代 码 : 


var root = document .documentE1Lement ; 
Foot .style.overflow = "'; 





Foot .style.borderRight 


就 可 以 实现 我 们 期 望 的 锁定 效果 了 。 


第 7 章 “CSS 世界 的 层 玲 规则 


所 谓 “ 层 全 规则 ， 指 的 是 当 网 页 中 的 元 素 发 生 层 合 时 的 表现 规则 。 


在 现实 世界 ， 凡 事 都 有 个 先后 顺序 ， 凡 物 部 有 个 论 资 排 磊 。 例 如 ， 
食堂 排 队 打 饭 ， 讲 求 先 到 先 得 ， 总 不 可 能 一 拥 而 上 ; 先入 学 的 是 学 长 学 
姐 ， 先 拜师 的 是 师兄 师姐 。 








在 CSS 界 也 是 如 此 。 只 是 ,一般 情况 下 众生 平等 ， 看 不 出 什么 差 
异 。 但 是 ， 当 产生 冲突 或 纠 芍 的 时 候 ， 显 然 古 不 可 能 做 到 完全 平等 的 。 
对 CSS 世 界 中 的 元 素 而 言 ， 所 谓 的 “冲突 ? 指 什么 呢 ， 其 中 很 重要 的 一 个 
层面 就 是 “ 层 合 显示 冲突 ”。 














默认 情况 下 ， 网 页 内 容 是 没有 偏 移 角 的 垂直 视觉 呈现 ， 当 内 容 发 生 
层 谷 的 时 候 ， 一 定 会 有 一 个 前 后 的 层 合 顺序 产生 ， 有 点 儿 类 似 于 真实 世 
界 中 “ 论 资 排 非 ”的 感觉。 





7.1 z-index 只 是 CSS 层 二 规则 中 的 一 叶 小 舟 


说 到 层 著 ， 很 多 人 第 一 反应 就 是 z-index 属性 ， 人 如 其 名 ，“z 轴 顺 
序 ” 明 摆 着 就 是 和 层 靶 规则 有 关 。 








在 CSS 世 界 中 ，z-index 属 性 只 有 和 定位 元 素 (position 不 
为 static 的 元 素 ) 在 一 起 的 时 候 才 有 作用 ， 可 以 是 正 数 也 可 以 是 负 
数 。 理 论 上 说 ， 数 值 越 大 层级 越 高 ， 但 实际 上 其 规则 要 复杂 很 多 ， 这 个 
后 面 会 深入 介绍 。 





但 随 着 CSS3 新 世界 的 到 来 ，z-index 已 经 并 非 只 对 定位 元 素 有 
效 ，flex 盒 子 的 子 元 素 也 可 以 设置 z-index 属 性 ， 不 过 本 书 并 不 予以 讨 


论 。 








要 知道 ， 网 页 中 绝 大 部 分 元 素 是 非 定位 元 素 ， 并 且 影 响 层 登 顺序 的 
属性 远 不 止 z-index 一 个 ， 因 此 大 家 干 万 不 要 以 为 z-index 属性 就 可 以 
代表 CSS 世 界 的 层 县 规 则 ， 实 际 上 z-index 只 是 CSS 层 县 规则 中 的 一 叶 
小 舟 ，CSS 层 羞 规 则 的 体 量 要 比 大 家 想象 的 要 大 得 多 。 





7.2 理解 CSS 世 界 的 层 登 上 下 文 和 层 登 水 平 


7.2.1 .什么 是 层 基 上下文 





层 登 上 和 下文， 英文 称 作 stacking context， 是 HTML 中 的 一 个 三 维 的 
概念 。 如 采 一 个 元 素 含 有 层 登 上 下 文 ， 我 们 可 以 理解 为 这 个 元 素 在 z 轴 
上 就 “高 人 一 等 ” 


这 里 出 现 了 一 个 名 词 一 一 z 轴 ， 它 指 的 是 什么 呢 ? 其 表示 的 是 用 户 
与 显示 器 之 间 这 条 看 不 见 的 垂直 线 ， 即 图 7-1 中 的 这 条 水 平 线 。 
































图 7-1 Z 贡 | 示意 











层 琶 上下文 是 一 个 概念 ， 跟 * 抉 状 格式 化 上 下 文 ”(BFC) 类 似 。 然 
而 ， 概 念 这 个 东西 是 比较 虚 、 比 较 抽 象 的 ， 要 想 轻松 理解 ， 我 们 需要 将 
其 具象 化 。 





怎么 个 具象 化 法 呢 ? 我 们 可 以 把 层 登 上 下 文理 解 为 一 种 "层叠 结 
界 *»， 自 成 一 个 小 世界 。 这 个 小 世界 中 可 能 有 其 他 的 “ 层 邯 结 界 ”， 而 自 





里 也 可 能 处 于 其 他 “ 层 登 结 界 ?中 。 
7.2.2 什么 是 层 重水 平 


再 来 说 说 “ 层 登 水 平 ”。 层 登 水 平 ， 英 文 称 作 stacking level， 决 定 了 
同一 个 层 暑 上 下 文中 元 素 在 z 轴 上 的 显示 顺序 。level 这 个 词 很 容易 让 我 
们 联想 到 现实 世界 中 的 论 资 排 童 。 现 实 世 界 中 ， 每 个 人 都 是 独立 的 个 
体 ， 包 括 同 卵 双胞胎 ， 有 差异 就 有 区 分 。 例 如 ， 双 胞 胎 虽 然 长 得 像 一 个 
模子 里 出 来 的 ， 但 实际 上 出 生 时 间 还 是 有 先后 的 ， 先 出 生 的 那个 就 大 ， 
是 大 哥 或 大 姐 。 网 页 中 的 元 素 也 是 如 此 ， 页 面 中 的 每 个 元 素 都 是 独立 的 
个 体 ， 它 们 一 定 是 会 有 一 个 类 似 的 排名 顺序 的 存在 。 而 这 个 排名 顺序 、 
论 资 排 辈 就 是 这 里 所 说 的 “ 层 车 水 平 ”。 



































显而易见 ， 所 有 的 元 素 都 有 层 舍 水 平 ， 包 括 层 苔 上 下 文 元 素 ， 也 包 
括 普 通 元 素 。 然 而 ， 对 普通 元 系 的 层 合 水 平 探讨 只 局 限 在 当前 层 合 上 下 
文 元 素 中 。 为 什么 呢 ? 因为 不 如 此 就 没有 意义 。 层 琶 上 下 文本 映 就 是 一 
个 强力 的 “ 层 车 结 界 ”， 而 普通 元 素 的 层 营 水 平 是 无 法 突破 这 个 结 界 和 结 
界外 的 元 素 去 较量 层 登 水 平 的 。 














要 注意 的 是 ， 诸 位 干 万 不 要 把 层 半 水 平和 CSS 的 z-index 属性 混 
尽管 某 些 情况 下 z-index 确实 可 以 影响 层 羞 水平 ， 但 是 只 限于 
定位 元 素 以 及 flex 盒 子 的 孩子 元 素 ; 而 层 闭 水 平 所 有 的 元 素 都 存在 。 























7.3 理解 元 系 的 层 登 顺序 


再 来 说 说 层 登 顺序 。 层 登 顺序 ， 英 文 称 作 stacking order， 表 示 元 素 
发 生 层 登 时 有 者 特 定 的 垂直 显示 有 顺序。 注意 ， 这 里 跟 上 面 两 个 不 一 样 ， 
上 面 的 “ 层 登 上下文? 和 ?“ 层 有 登 水 平 " 是 概念 ， 而 这 里 的 “ 层 登 顺序 ”是 规 
则 。 








在 CSS 2.1 的 年 代 ， 在 CSS3 新 世界 还 没有 到 来 的 时 候 〈 注 意 这 里 的 
前 提 ) ， 层 车 顺序 规则 如 图 7-2 所 示 。 


层 葵 上 下 文 
background/border 


block 块 状 水 平 盒子 





图 7-2 ”CSS 世界 层 针 顺序 规则 





关于 图 7-2 这 里 有 一 些 补充 说 明 。 


(1) 位 于 最 下 面 的 background/border 特 指 层 琶 上 下 文 元 素 的 边 
框 和 背景 色 。 每 一 个 层 疤 顺序 规则 仪 适 用 于 当前 层 有 上下文 元 素 的 小 世 


(2) inline 水 平 盒子 指 的 是 包括 inline/inline- 
block/inline-table 元 素 的 “ 层 膨 顺序”， 它 们 都 是 同等 级 别 的 。 


(3) 单纯 从 层 色 水 平 上 看 ， 实 际 上 z-index:8 和 z-index:auto 是 
可 以 看 成 是 一 样 的 。 注 意 这 里 的 措辞 一 一 “单纯 从 层 羞 水平 上 看 ”， 实 际 
上 ， 两 者 在 层 登 上 下 文 领 域 有 着 根本 性 的 差异 。 


下 面 我 要 问 一 个 有 意思 的 问题 ， 大 家 有 没有 想 过 ， 为 什么 内 联 元 素 
的 层 登 顺序 要 比 浮 动 元 系 和 块 状 元 素 都 高 ? 


为 什么 呢 ? 我 明明 感觉 浮动 元 素 和 块 状元 系 要 更 强 一 点 啊 。 我 束 不 
卖 关 子 了 ， 直 接 看 图 7-3 中 的 标注 说 明 。 


层 殴 上下文 
background/border 


下 一 一 并 


Yt 
站 OQeX:B oO 





图 7-3 CSS 世界 层 靶 顺序 类 型 标注 


background/border 为 装饰 属性 ， 浮 动 和 块 状元 素 一 般 用 作 布 
局 ， 而 内 联 元 素 都 是 内 容 。 网 页 中 最 重要 的 是 什么 ? 当然 是 内 容 了 ! 万 
其 是 CSS 世 界 是 为 更 好 的 图 文 展示 而 设计 的 ， 因 此 ， 一 定 要 让 内 容 的 层 
车 顺序 相当 高 ， 这 样 当 发 生 层 合 时 ， 重 要 的 文字 、 图 片 内 容 才 可 以 优先 
显示 在 屏幕 上 上。 例如， 文字 和 浮动 图 片 重 登 的 时 候 ， 如 图 7-4 所 示 。 















哥 ， 好 巧 啊 ，, 我 也 是 帅哥 ， 
这 本 书 的 人 都 是 帅 襄 ~ 








图 7-4 ”浮动 元 素 和 文字 重 营 时 文字 在 上 二 











7.4 务必 牢记 的 层 登 准则 








下 面 这 两 条 是 层 登 领域 的 黄金 准则 。 当 元 素 发 生 层 有 登 的 时 候 ， 其 轿 
兰 关系 遵循 下 面 两 条 准则 : 











(1) 谁 大 谁 上 : 当 具 有 明显 的 层 登 水 平 标识 的 时 候 ， 如 生效 的 z- 
index 属 性 值 ， 在 同一 个 层 登 上 下 文 领 域 ， 层 有 登 水 平 值 大 的 那 一 个 履 兰 
小 的 那 一 个 。 








(2) 后 来 居 上 : 当 元 系 的 层 登 水 平一 致 、 层 登 顺序 相同 的 时 候 ， 
在 DOM 流 中 处 于 后 面 的 元 素 会 履 兰 前 面 的 元 素 。 








在 CSS 和 HTML 和 领域， 只 要 元 素 发 生 了 重 登 ， 都 离 不 开 上 面 这 两 条 
黄金 准则 。 因 为 后 面 会 有 多 个 实例 说 明 ， 这 里 就 到 此 为 止 。 


7.5 深入 了 解 层 合 上 下 文 
7.5.1 层 双 上下文 的 特性 





层 登 上 下 文 元 系 有 如 下 特性 。 





层 登 上 下 文 的 层 登 水 平 要 比 普 通 元 素 高 〈 原 因 后 面 会 说 明 ) 。 

层 全 上下文 可 以 阻 断 元 系 的 混合 模式 (参见 
http://www.zhangxinxu.com/wordpress/?p=5155 的 这 篇 文章 的 第 二 部 
分 说 明 〉。 

层 辣 上 下 文 可 以 艇 套 ， 内 部 层 辣 上下文 及 其 所 有 子 元 素 均 受制 于 外 
部 的 “ 层 琶 上 下 文 ”。 

每 个 层 登 上 下 文 和 兄弟 元 素 独立 ， 也 就 是 说 ， 当 进行 层 登 变化 或 泻 
染 的 时 候 ， 只 需要 考虑 后 代 元 又 。 

每 个 层 登 上 下 文 是 自 成 体系 的 ， 当 元 际 发 生 层 登 的 时 候 ， 整 个 元 素 
被 认为 是 在 父 层 营 上 下 文 的 层 舍 顺序 中 。 














7.5.2 层 车 上 下 文 的 创建 





和 块 状 格式 化 上 下 文 一 样 ， 层 全 上 下 文 也 基本 上 是 由 一 些 特定 的 


CSS 属 性 创建 的 。 我 将 其 总 结 为 3 个 流泪 。 





(1) 天 生 派 : 页 面 根 元 素 天 生 有 具有 层 县 上 下 文 ， 称 为 根 层 琶 上 下 


(2) 正统 派 : z-index 值 为 数值 的 定位 元 系 的 传统 “ 层 合 上 下 


(3) 扩招 派 : 其 他 CSS3 属 性 。 
1. 根 层 倒 上 下 文 





根 层 登 上 下 文 指 的 是 页 面 根 元 素 ， 可 以 看 成 是 <htm1> 元 素 。 
此 ， 页 面 中 所 有 的 元 素 一 定 处 于 至 少 一 个 “ 层 登 结 界 ”中 。 











2. 定位 元 素 与 传统 层 合 上 下 文 


对 于 position 值 为 relative/absolute 以 及 Firefox/IE 浏 览 器 (不 
包括 Chrome 浏 览 器 ) 下 含有 position:fixed 声 明 的 定位 元 素 ， 当 其 z- 
index 值 不 是 auto 的 时 候 ， 会 创建 层 登 上 下 文 。 





知道 了 这 一 点 ， 有 些 现象 融 好 理解 了 。 


HTML 代 人 码 如 下 : 


<div style="position:relative; z-index:auto;"> 

<1-- 美女 --> 

<img src="1.jpg" style="position:absolute; z-index:2;" 
</div> 


<div style="position:relative; z-index:auto;"> 

<!-- 美景 --> 

<img src="2.jpg" style="position:relative; z-index:1;" 
</divy> 








结果 如 图 7-5 所 示 。 效 果 符 合 预期 ， 毕 葛 “ 美 女 ” 图 片 的 z-index 值 


是 2， 而 “美景 ”图片 的 z-index 是 1。 





下 面 我 们 对 父 级 简单 调整 一 下 ， 把 z-index:auto 改 成 层 著 水 平一 
样 高 的 z-index:60。 代 码 如 下 : 





<div style="position:relative; z-index:0@,; 


<1-- 美女 --> 





<img src="1.jpg" style="position:absolute; z-index:2;"> 


</div> 
<div style="position:relative; z-index:0;"> 

<1-- 美景 --> 

<img src="2.jpg" style="position:relative; z-index:1;"> 
</div> 








结果 会 发 现 履 盖 关 系 居 然 反 过 来 了 ， 此 时 “美景 "图片 履 盖 在 了 "美女 ”图 
片 之 上 ， 如 图 7-6 所 示 。 








图 7-5 “美女 ” 履 盖 在 “美景 > 之 上 





图 7-6 (9 景 ” 履 盖 在 “美女 ”之 上 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/7/5-1.php 或 者 扫 右 侧 的 
二 维 人 码 。 





为 什么 小 小 的 改变 会 产生 相反 的 结果 呢 ?” 差 别 就 在 于 ，z-index: 
auto 所 在 的 <div> 元 素 是 一 个 普通 定位 元 素 ， 于 是 ， ee 
元 素 的 层 且 比较 就 不 受 父 级 的 有 影响， 两 者 直接 套用 “ 层 闭 黄金 准则 ”。 

里 ， 两 个 <img> 元 素 有 着 明显 不 一 的 z-index 值 ， 因 此 遵循 “ 谁 大 谁 
上 ”的 准则 ， 于 是 ，z-index 为 2 的 那个 “美女 ” 束 显 示 在 z-index 为 1 
的 “和 过 “上面 了 ; 








而 z-index 一 旦 变 成 数值 ， 哪 伯 是 8， 惑 会 创建 一 个 层 登 上 下 文 。 
此 时 ， 层 县 规则 就 发 生 了 变化 。 层 登 上 下 文 的 特性 里 面 最 后 一 条 是 自 成 
体系 。 两 个 <img> 元 素 的 层 登 顺序 比较 变 成 了 优先 比较 其 父 级 层 登 上 下 
文 元 素 的 层 登 顺序 。 这 里 ， 由 于 外 面 的 两 个 cdiv> 元 素 都 是 z- 
index:6， 两 者 层 登 顺序 一 样 大 ， 此 时 遵循 “ 层 登 黄金 准则 ”的 另外 一 个 
准则 “后 来 居 上 ”， 根 据 在 DOM 文 档 流 中 的 位 置 决 定 谁 在 上 面 ， 于 是 ， 
位 于 后 面 的 “美景 ”就 上 自然而然 显 示 在 “美女 ?上 面 了 。 对 ， 没 错 ，<img> 





元 素 上 的 z-index 没 起 作用 ! 








有 时 候 ， 我 们 在 网 页 重 构 的 时 候 会 发 现 z-index 内 套 错乱 ， 这 时 要 
看 看 是 不 是 受 父 级 的 层 营 上 下 文 元 素 干 扰 了， 可 能 就 只 然 开朗 了 。 但 我 
还 是 提 一 下 ，IE6 和 IE7 浏 览 器 有 个 bug， 就 是 z-index:auto 的 定位 元 素 
也 会 创建 层 著 上 下 文 。 这 就 是 过 去 IE6 和 IE7 的 z-index 会 折腾 死人 的 原 
因 。 











我 再 提 一 下 position:fixed。 在 过 去 ，position:fixed 和 
relative/ absolute 在 层 登 上 下 文 这 一 块 是 一 样 的 ， 都 是 需要 z- 
index 为 数值 才 行 。 但 是 ， 不 知道 什么 时 候 起 ，Chrome 等 WebKit 内 核 浏 
览 器 下，position:fixed 元 素 天 然 层 闭 上 下 文 元 素 ， 无 须 z-index 为 
数值 。 根 据 我 的 测试 ， 目 前 正和 Firefox 仍 是 老人 套路。 








3. CSS3 与 新 时 代 的 层 登 上 下 文 


CSS3 新 世界 的 出 现 除 了 带 来 了 新 属性 ， 还 对 过 去 的 很 多 规则 发 出 
了 挑战 ， 其 中 对 层 登 上 下 文 规则 的 影响 显得 特别 突出 。 





(1) 元 素 为 flex 布 局 元 素 〈 父 元 素 display:flex|inline- 
flex) ， 同 时 z-index 值 不 是 auto。 


(2) 元 素 的 opacity 值 不 是 1。 
(3) 元 素 的 transform 值 不 是 none。 
(4) 元 素 mix-blend-mode 值 不 是 normal。 


(5) 元 素 的 filter 值 不 是 none。 


(6) 元 素 的 isolation 值 是 isolate。 


(7) 元 素 的 wil1-change 属 性 值 为 上 面 2 一 6 的 任意 一 个 〈 如 


will-change:opacity、will-chang:transform 等 ) 。 
(8) 元 素 的 -webkit-overflow-scrolling 设 为 touch。 


本 书 主要 介绍 CSS 世 界 的 知识 ， 因 此 关于 CSS3 新 世界 的 内 容 就 说 这 
么 多 。 





7.5.3 层 营 上 下 文 与 层 稚 顺序 


本 章 多 次 提 到 ， 一 旦 普通 元 素 上 共有 了 层 登 上下文， 其 层 合 顺 友 束 会 
变 高 。 那 它 的 层 登 顺序 客 竟 在 哪个 位 置 、 哪 个 级 别 呢 ? 








这 里 需要 分 两 种 情况 讨论 : 


(1) 如果 层 闭 上 下 文 元 素 不 依赖 z-index 数值 ， 则 其 层 羞 顺序 
是 z-index:auto， 可 看 成 z:index:6 级 别 ; 


(2) 如 果 层 车 上 下 文 元 素 依赖 z-index 数值 ， 则 其 层 靶 顺序 由 z- 
index 值 决定 。 





我 们 上 面 提供 的 层 登 顺序 图 实际 上 还 缺少 其 他 重要 信息 。 我 又 花 工 
夫 重 新 绘制 了 一 个 更 完整 的 7 阶层 又 顺序 图 ， 如 图 7-7 所 示 。 


层 登 上 下 文 
background/border 


block 块 状 水 平 盒子 


niline 水 平 盒子 


z-index:auto 或 者 成 z-index 


不 依 束 z-index 的 层 居 上 下 


正 z-Index 





图 7-7 ”新 的 层 登 顺序 规则 


这 下 大 家 应 该 知道 为 什么 定位 元 素 会 层 登 在 普通 元 素 的 上 面 了 吧 ? 
其 根本 原因 就 是 : 元 素 一 旦 成 为 定位 元 素 ， 其 z-index 就 会 自动 生效 ， 
此 时 其 z-index 就 是 默认 的 auto， 也 就 是 69 级别， 根据 上 面 的 层 钱 顺序 
表 ， 就 会 履 六 inline 或 block 或 float 元 素 。 而 不 支持 z-index 的 层 圭 
上 下 文 元素 天 然 是 z-index:auto 级 别 ， 也 就 意味 着 ， 层 做 上 下 文 元 素 
和 定位 元 素 是 一 个 层 冯 顺序 的 ， 于 是 当 它 们 发 生 层 闭 的 时 候 ， 遵 循 的 
是 “后 来 居 上 ”准则 。 











我 们 可 以 看 一 个 例子 : 


<img src="1.jpg" style="position:relative"> 


<img src="2.jpg" style="transform:scale(1);"> 











这 符合 "后 来 居 上 ”准则 ,“ 美 景 "覆盖 在 "美女 * 之 上， 如 图 7-8 所 示 。 








<img src="2.jpg" style="transform:scale(1);"> 





<img src="1.jpg" style="position:relative"> 











这 同样 符合 “后 来 天 上 ”准则 ,， “美女 ” 窗 盖 在 “美景 "之 上 ， 如 图 7-9 所 示 。 


你 会 发 现 ， 两 者 样式 一 模 一 样 ， 只 是 在 DOM 流 中 的 位 置 不 一 样 ， 
这 导致 它们 的 层 羞 表现 不 一 样 ， 后 面 的 图 片 在 前 面 的 图 片 的 上 面 显 示 。 
这 就 说 明 层 用 上 下 文 元 素 的 层 闭 顺序 束 是 z-index:auto 级 别 。 














最 后 分 享 一 个 与 层 合 上 下 文 相关 的 有 趣 现象 。 








图 7-8 “美景 " 窗 盖 在 “美女 ”之 上 











图 7-9 “美女 ” 履 盖 在 “美景 "之 上 





在 实际 项 目 中 ， 我 们 可 能 会 渐进 使 用 CSS3 的 fadeIn 淡 
入 animation 效 果 增 强 体 验 ， 于 是 我 们 可 能 就 会 遇 到 类 似 下 面 的 现象 ， 
手动 输入 http://demo.cssworld.cn/7/5-2.php 或 者 扫 右 侧 的 二 维 码 。 有 一 个 
绝对 定位 的 黑色 半 透 明 层 缆 盖 在 图 片上 ， 默 认 显 示 如 图 7-10 所 示 。 但 
是 ， 一 旦 图 片 开 始 走 fadeIn 淡 出 的 CSS3 动 画 ， 文 字 就 跑 到 图 片 后 面 去 
了 ， 因 为 文字 一 直 是 100% 透 明 的 纯 白 色 ， 文 字 变 淡 是 因为 跑 到 图 片 后 
面 ， 而 图 片 半 透 明 ， 文 字 罕 透 显示 而 已 ， 如 网 7-11 所 示 。 

















只 有 图 片 淡出 ,文案 一 直 ]100% 透 明 


图 7-10 ”默认 的 黑色 半 透 明 履 盖 





图 7-11 图 片 淡 出 ， 文 字 跑 到 图 片 后 面 





为 什么 会 这 样 ? 实际 上 ， 学 了 本 市 的 内 容 后 就 很 容易 理解 
了 。fadeIn 动 画 本 质 是 opacity 透 明度 的 变化 : 
@keyframes fadeIn { 


86X% { 
opacity: 0@; 


} 
166% { 
opacity: 1; 
} 
} 





要 知道 ，opacity 的 值 不 是 1 的 时 候 ， 是 具有 层 阁 上 下 文 的 ， 层 疮 
顺序 是 z-index:auto 级 别 ， 跟 没有 z-index 值 的 absolute 绝 对 定位 元 








素 是 平起平坐 的 。 而 本 实例 中 的 文字 元 素 在 图 片 元 素 的 前 面 ， 于 是 ， 只 
要 CSS3 动 画 不 是 最 终 一 瞬间 的 opacity:1， 位 于 DOM 流 后 面 的 图 片 就 
会 遵循 “后 来 天 上 ”准则 而 履 盖 文字 


知道 原因 ， 想 要 解决 这 个 问题 束 很 简单 了 : 


(1) 调整 DOM 流 的 先后 顺序 ; 





(2) 提高 文字 的 层 倒 顺序 ， 人 例如， 设置 z-index:1。 


7.6 z-index 人 负 值 深入 理解 


首先 明确 一 点 ，z-index 是 文 持 负 值 的 ， 例 如 z-index:-1 或 者 z- 
index:-99999 都 是 可 以 的 。 按 照 我 多 年 面试 新 人 的 结果 来 看 ， 非 常 多 
的 人 都 不 知道 z-index 属 性 文 持 负 值 ， 这 让 人 很 意外 一 一 这 可 以 说 是 
CSS 世 界 的 常识 啊 ! 我 想 了 一 下 ， 或 许 因 为 这 些 人 的 知识 都 是 源 自 项 
目 ， 如 果 项 目 用 不 到 自然 就 不 知道 。 


确实 ， 你 不 知道 z-index 支 持 负 值 并 不 影响 现在 的 开发 ， 需 求 可 以 
通过 其 他 方式 实现 ， 但 是 存在 既 有 道理 ， 你 不 知道 并 不 表示 没有 用 。 一 
旦 掌握 透彻 了 ， 你 会 发 现 ， 本 来 很 麻烦 的 实现 原来 可 以 这 么 简单 地 实 

现 ， 你 会 发 现 ， 当 遇 到 一 些 球 手 问题 的 时 候 ， 多 了 一 种 解 题 思路 ， 如 此 


等 等 
i 











那 z-index 具 体 的 表现 规则 又 是 怎样 的 呢 ? 


很 多 人 包括 我 ) 一 开始 的 时 候 ， 以 为 一 个 定位 元 素 设 置 z-index 
负 值 ， 就 会 跑 到 页 面 的 背后 ， 隐 藏 挥 ， 看 不 到 了 。 结 果实 际 上 是 有 时 候 
确实 隐藏 了 ， 但 有 时 候 又 隐藏 不 挥 。 为 什么 会 这 样 ? 





因为 z-index 负 值 的 最 终 表 现 并 不 是 单一 的 ， 而 是 与 “ 层 合 上 下 
文 " 和 “ 层 登 顺序 ”密切 相关 。 前 面 展示 的 层 登 顺序 规则 7 阶 图 ， 其 中 最 下 
面 的 2 阶 是 理解 z-index 负 值 表现 的 关键 ， 如 图 7-12 所 示 。 





层 登 上下文 
background/border 


block 块 状 水 平 盒子 











图 7-12 “ 层 又 顺序 ”最 底层 2 阶 








图 7-12 中 已 经 很 明显 地 标明 了 ，z-index 负 值 元 素 的 层级 是 在 层 羞 
上 下 文 元 素 上 和 面 、block 元 素 的 下 面 ， 也 就 是 z-index 虽然 名 为 负数 层 
级 ， 但 依然 无 法 突破 当前 层 琶 上 下 文 所 包 囊 的 小 世界 。 





我 们 通过 下 面 几 个 小 例子 加 深 一 下 理解 。 自 先 HTML 都 是 一 致 的 ， 
如 下 : 
<div class="box"> 


<img src="1.jpg"> 
</div> 





先 看 下 面 的 CSS 代 码 : 


.box { 
background-color: blue; 


.box > img { 


position: relative; 
z-index: -1; 
right: -56pX; 





} 





此 时 .box 古 一 个 普 普 通通 的 元 素 ， 图 片 元 系 所 在 的 层 合 上 下 文 元 系 
一 定 是 .box 的 条 个 和 祖 先 元 素 。 好 了， 知道 这 么 多 足够 了， 现在 再 回顾 一 
下 刚刚 出 现 的 图 7-13 所 示 的 这 张 图 。 





图 7-13 中 非常 明显 地 标明 了 z-index 负 值 在 block 元 素 的 下 面 。 本 
例 中 ， 图 片 是 z-index 负 值 元 素 ，.box 是 bplock 元 素 ， 也 就 是 图 片 应 该 
在 .box 元 素 的 后 面 显示 ， 因 此 ， 图 片 会 被 .box 元 素 的 蓝 色 背景 覆盖 。 
最 后 的 结果 确实 如 此 ， 如 图 7-14 所 示 。 








层 登 上 下 文 
background/border 


负 z-index 


block 块 状 水 平 盒子 





图 7-13 z-index 负 值 在 block 元 素 下 面 





图 7-14 图 片 在 蓝 色 背 景色 之 下 





现在 ， 我 们 给 .box 元 素 加 个 样式 ， 使 其 具有 层 登 上下文。 很 多 CSS 
属性 都 可 以 ， 我 们 这 里 残 使 用 不 影响 视觉 表现 的 transform 属 性 示意 如 
下 : 








.box { 
background-color: blue; 
transform: scale(1); 


} 


.box > img { 
position: relative; 
z-index: -1; 
right: -56pX; 

} 





CSS3 transform 可 以 让 元 素 上 共有 新 的 层 合 上 下 文 ， 于是， 对 照 图 
7-15， 非 常 明显 地 标明 了 z-index 负 值 在 层 合 上 下 文 元素 的 背景 色 之 
上 ， 也 就 是 说 ， 这 里 z-index 是 负 值 的 图 片 元 素 应 该 在 .box 元 素 的 上 
面 。 最 后 的 结果 确实 如 此 ， 如 图 7-16 所 示 。 











层 王 上下文 
background/border 


block 块 状 水 平 盒子 





图 7-15 z-index 负 值 在 “ 层 辣 上 下 文 "之 上 








图 7-16 图片 在 蓝 色 背景 色 之 上 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/7/6-1.php 或 者 扫 右 侧 的 
二 维 码 。 








可 以 这 么 说 ，z-index 负 值 泻 染 的 过 程 就 是 一 个 寻找 第 一 个 层 琶 上 
下 文 元 素 的 过 程 ， 然 后 层 闭 顺序 止步 于 这 个 层 共 上 下 文 元 素 。 

















明白 了 这 一 点 ， 就 可 以 理解 为 何 z-index 负 值 隐 藏 元 素 有 时 候 确实 
隐藏 ， 但 有 时 候 又 隐藏 不 挤 了 。 








那 z-index 负 值 在 实际 项 目 中 有 什么 用 呢 ? 具体 作用 如 下 。 








(1) 可 访问 性 隐藏 。z-index 负 值 可 以 隐藏 元 素 ， 只 需要 层 钱 上 
下 文 内 的 某 一 个 父 元 素 加 个 背景 色 就 可 以 。 它 与 cLip 隐 藏 相 比 的 一 个 优 
势 是 ， 元 素 无 须 绝 对 定位 ， 设 置 position:relative 也 可 以 隐藏 ， 另 
一 个 优势 是 它 对 原来 的 布局 以 及 元 素 的 行为 没有 任何 影响 ， 而 clip 隐 藏 
会 导致 控件 focus 的 焦点 发 生 细微 的 变化 ， 在 特定 条 件 下 是 有 体验 问题 
的 。 它 的 不 足 之 处 就 是 不 具有 普遍 适用 性 ， 需 要 其 他 元 系 配 合 进行 隐 
藏 。 




















(2) IE8 下 的 多 背景 模拟 。CSS3 中 有 一 个 多 背景 特性 ， 就 是 一 
个 background 可 以 写 多 个 背景 图 。 虽 然 IE8 浏 览 器 不 文 持 多 背景 特性 ， 


但 是 IE8 浏 览 器 支持 伪 元 素 ， 于 是 ，IE8 理 论 上 也 能 实现 多 背景 ， 这 个 背 
景 最 多 3 个 ， 好 在 绝 大 多 数 场 景 3 个 背景 图 足 恬 。 最 奔 烦 的 其 实 是 这 个 伪 
元 素 生 成 的 背景 一 定 是 使 用 absolute 绝 对 定位 ， 以 免 影响 内 容 的 布 
局 。 于 是 问题 来 了 ， 绝 对 定位 会 覆盖 常规 的 元 素 ， 此 时 则 必须 借助 z- 
index 负 值 ， 核 心 CSS 代 码 如 下 : 





.box { 
background-image: (1.png); 
position: relative; 
z-index: 9; /* 创建 层 琶 上 下 文 */ 
} 
.box:before, 
.box:after { 





content: ''; 
position: absolute; 
z-index: -1; 


.box:before { 
background-image: (2.png); 


.box:after { 
background-image: (3.png); 
} 





此 时 ， 就 算 .box 元 素 里 面 是 纯 文 字 ， 伪 元 素 图 片 照 样 在 文字 下 面 ， 
如 此 广泛 的 适用 场景 使 上 面 的 处 理 几 乎 可 以 作为 通用 的 多 背景 模拟 实现 
准则 来 实现 了 : 


<div class="box"> 我 是 一 段 纯 文字 . ..</divy> 





(3) 定位 在 元 素 的 后 面 。 我 们 直接 看 一 个 模拟 纸张 效果 的 例子 ， 
该 效果 的 亮点 是 纸张 的 边 角 有 卷 起 来 的 效果 ， 因 为 底 边 的 阴影 看 起 来 更 
有 和 角度， 如 图 7-17 所 示 。 如 果 图 7-17 因 打印 原因 看 得 不 真切 的 话 ， 可 以 
手动 输入 http://demo.cssworld.cn/7/6-1.php 或 者 扫 下 面 的 二 维 码 亲自 感受 











一 下 效 宁 。 





图 7-17 纸张 边 角 卷 起 来 的 阴影 














HTML 结 构 大 致 如 下 : 


<div class="container"> 
<div class="page"> 标 题 和 内 容 </div> 
</div> 





其 中 ，.container 是 灰色 背景 元 素 ，.page 是 黄色 背景 的 纸张 元 素 ， 
关键 CSS 如 下 : 





.Container { 
background-color: #666; 
/* 创建 层 营 上 下 文 */ 
position: relative; 
z-index: 6; 

} 

.page { 


background-color: #f4f39e; 
position: relative; 


} 

/* 边 角 卷 边 阴影 * 
.page:before， 让 { 
content: ""; 

width: 96%; height: 262%; 

box-shadow: © 8px 16px rgba(6,6,6,，.3); 

position: absolute; 

/* 层 合 上 下 文 (灰色 背景 ) 之 上 ， 定 位 元 素 (黄色 纸张 ) 之 下 */ 

z-index: -1; 

















} 

/* 边 角 卷 边 阴影 定位 和 和 角度 控制 */ 
.page:before { 
transform: skew(-15deg) rotate(-5deg); 
transform-origin: left bottom; 
left: 6; bottom: ©; 

} 

.page:after { 
transform: skew(15deg) rotate(5deg) ; 
transform-origin: right bottom; 
right: 6; bottom: 6; 

} 





.Container 灰 色 背 景 通 过 position:relative;z-index:6 创 建 了 层 
县 上 下 文 ，.page 仅 有 position:relative 而 没有 设置 z-index 值 ， 
此 只 能 算 z-index:auto 程 度 的 定位 元 素 ， 于 是 ，z-index: -1 两 个 边 角 
阴影 就 完美 地 藏 在 了 层 琶 上 下 文 〈 灰 色 背 景 ) 之 上、 普通 定位 元 素 〈 黄 
色 纸 张 ) 之 下 《〈 如 图 7-18 所 示 标 注 ) ， 隐 藏 了 丑陋 的 细节 ， 展 示 了 完美 
的 边 角 阴 影 ， 实 现 了 最 终 细 上 腊 的 样式 效果 。 











层 芍 上下文 


background/border 





图 7-18 z-index:-1 边 角 阴 影 在 本 案例 中 的 层 老 顺序 位 置 


7.7 z-index“ 不 犯 二 ”准则 





此 准则 内 容 如 下 : 对 于 非 浮 层 元 素 ， 避 免 设置 z-index 值 ，z- 
index 值 没有 任何 道理 需要 超过 2。 由 于 z-index 不 能 超过 2， 因 此 ， 我 
称 其 为 “不 犯 二 ”准则 。 


这 是 一 条 经 验 准 则 ， 可 以 有 效 降低 日 后 过 到 z-index 样式 问题 的 风 


先 讲 一 下 为 什么 需要 这 个 准则 。 





(1) 定位 元 素 一 旦 设置 了 z-index 值 ， 就 从 普通 定位 元 素 变 成 了 
层 登 上下文 元 系 ， 相 互 间 的 层 合 顺序 正太 生 了 根本 的 变化 ， 很 容易 出 现 
设置 了 巨大 的 z-index 值 也 无 法 和 履 盖 其 他 元 际 的 问题 。 





(2) 避免 z-index“ 一 山 比 一 山高 ”的 样式 混乱 问题 。 此 问题 多 发 
生 在 多 人 协作 以 及 后 期 维护 的 时 候 。 例 如 ，A 小 图 标定 位 ， 习 惯性 写 了 
个 z-index:9; B 一 看 ， 上 自己 原来 的 实现 被 窗 关 了， 并 瑟 写 了 个 z- 
index:99; 结果 比 弹 框 组 件 层级 还 高 ， 那 还 得 了 ， 立 马 弹 框 组 件 来 一 
个 z-index:999999; 谁 知 后 来 ， 弹 框 中 义 要 有 出 错 提示 效果 ..….... 显 
然 ， 最 后 项 目的 z-index 层级 管理 就 是 一 团 糟 。 


如 果真 的 了 解 了 本 章 的 内 容 ， 你 就 会 发 现 ， 原 来 自己 的 代码 中 很 大 
一 部 分 z-index 设 置 都 是 多 余 的 ， 不 仅 浪 费 代 码 ， 还 埋 下 样式 问题 风 
险 ， 无 其 那 种 使 用 absolute 绝 对 定位 必 使 用 z-index 的 做 法 是 最 思 泰 
的 。 


如 果 DOM 顺 序 确 实 无 法 调整 ， 不 得 不 使 用 z-index 值 ， 请 记 
住 ，z-index 不 要 超过 2， 不 是 不 能 ， 而 是 没有 必要 。 我 从 业 这 人 么 多 
年 ， 遇 到 很 多 很 复杂 的 与 定位 相关 的 交互 场景 ， 但 z-index 最 多 止步 于 
2。 如 果 你 的 定位 发 现 必须 z-index:3 或 者 以 上 才能 满足 效果 ， 建 议 你 
检查 自己 的 代码 ， 试 试 应 用 “relative 的 最 小 化 原则 ”来 实现 ， 试 试 利 
用 元 素 原生 的 层 车 顺序 进行 层级 控制 ， 等 等 。 


很 重要 的 一 点 ， 我 这 里 的 “不 犯 二 ”准则 ， 并 不 包括 那些 在 页 面 上 丈 
来 冉 去 的 元 素 定 位 ， 弹 框 、 出 错 提示 、 一 些 下 拉 效 果 等 都 不 受 这 一 准则 
限制 。 


对 于 这 类 JavaScript 驱 动 的 浮 层 组 件 ， 我 会 借助 “层级 计数 器 ”来 管 
理 ， 原因 如 下 : 


(1) 总 会 遇 到 意 想 不 到 的 高 层级 元 系 ; 
(2) 组 件 的 窗 盖 规 则 具有 动态 性 。 


所 谓 “ 层 级 计数 器 ”， 实 际 上 就 是 一 段 JavaScript 肢 本， 会 表 历 所 
有 <body> 处 于 显示 状态 的 子 元 素 ， 并 得 到 最 大 z-index 值 ， 和 默认 的 
z-index 做 比较 。 如 果 超 出 ， 则 显示 的 组 件 的 z-index 自动 加 1， 这 样 就 
不 会 出 现 有 组 件 被 其 他 组 件 履 盖 的 问题 ;如 果 不 超 出 ， 就 使 用 默认 的 z- 
index 值 ， 我 习惯 设 成 9， 因 为 遵循 “不 犯 二 ”准则 的 情况 下 ，9 已 经 是 个 
足够 安全 的 值 了 ， 浮 层 组 件 根 本 无 须 担心 会 被 页 面 上 某 个 元 素 层级 覆 
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此 刻 大 家 不 妨 想 想 自己 的 项 目 ， 如 果 所 有 的 浮 层 相关 的 组 件 容器 的 


z-index 默认 值 是 9， 会 不 会 出 现 样式 问题 。 如 果 觉 得 层级 太 低 不 敢 想 
象 ， 则 说 明 你 的 项 目 层 级 这 块 还 有 较 大 改进 的 空间 。 





页 面 上 主体 元 素 遵循 z-index“ 不 犯 二 ”准则 ， 浮 层 元 素 使 用 z- 
index“ 层 级 计数 器 >”， 双 管 齐 下 ， 从 此 和 z-index 问 题 说 拜拜 ! 


第 8 章 ”强大 的 文本 处 理 能 


时 势 造 英 雄 。 在 我 上 学 那 会 儿 ， 网 络 融 宽 受 限 ， 电 脑 性 能 低下 ， 在 
这 种 大 背景 下 ， 重 文字 欠 容 的 展示 是 比较 符合 现实 情况 的 ， 要 是 去 摘 个 
直播 网 站 ， 多 半 “ 卡 巴 斯 基 《〈 卡 吧 有 死机) ”， 上 所 以 在 那个 时 代 背 景 下 ， 什 
么 技术 能 够 非常 方便 地 进行 文本 处 理 和 文本 展示 ， 那 这 个 技术 一 定 能 够 
普及 和 兴盛 。 





CSS 就 是 凭借 自身 强大 的 文本 处 理 和 文本 展示 能 力 成 为 样式 布局 的 
标杆 语言 的 。 同 时 代 的 SVG 的 优势 在 于 图 形 展示 ， 它 在 文本 处 理 这 一 块 
实在 是 不 敢 茶 维 。 比 方 说 简单 的 文字 边缘 上 自动 换行 ， 在 CSS 流 的 概念 里 
几乎 可 以 说 是 天 生 的 、 理 所 当然 的 ， 但 在 SVG 里 面 ， 完 全 就 十 撞 了 南 墙 
也 不 回头 啊 ! 必须 要 手动 点 拨 一 下 才 行 。 





当然 ， 随 着 现在 软 人 硬件 的 提升 ， 人 们 对 互联 网 的 需求 已 经 不 仪 仅 局 
限于 简单 的 图 文 展 示 了 ， 此 时 ，SVG 以 及 canvas 等 技术 开始 迎 来 自己 的 
春天 。 


CSS 文 本 处 理 能 力 之 所 以 强大 ， 一 方面 是 其 基础 概念 ， 例 如 块 级 盒 
模型 和 内 联 盒 模型 ， 就 是 为 了 让 文本 可 以 如 文档 般 自 然 呈现 ， 另 一 方面 
是 有 非常 非常 多 与 文本 处 理 相 关 CSS 属 性 的 支持 。 而 本 章 就 将 着 重 介绍 
这 些 CSS 属 性 一 些 可 能 不 为 人 知 的 地 方 。 














8.1 line-height 的 另外 一 个 朋友 font-size 


第 5 章 介绍 过 line-height 和 vertical-align 的 好 朋友 关系 ， 实 
际 上 ，font-size 也 和 1line-height 是 好 朋友 ， 同 样 也 无 处 不 在 ， 并 且 
纸 面 上 Line-height 的 数值 属性 值 和 百分比 值 属 性 值 都 是 相对 于 font- 
size 计 算 的 ， 其 关系 可 谓 不 言 而 喻 。 





现在 有 意思 了 ， 所 谓 朋友 的 朋友 也 是 朋友 ， 那 font-size 和 
vertical-align 是 不 是 也 是 朋友 呢 ? 





8.1.1 font-size 和 vertical-align 的 隐秘 故事 


line-height 的 部 分 类 别 属性 值 是 相对 于 font-size 计 算 
的 ，vertical-align 百 分 比值 属性 值 又 是 相对 于 line-height 计 算 
的 ， 于 是 ， 看 上 去 八 奉子 都 措 不 上 边 的 vertical- align 和 font-size 
属性 背后 其 实 也 有 有 着 关联 的 。 





例如 ， 下 面 的 CSS 代 码 组 合 : 


font-size: 16px; 
line-height: 1.5; 


} 

p > img { 
vertical-align: -25%; 

} 





此 时 ，p > img 选 择 器 对 应 元 素 的 vertical-align 计 算 值 应 该 是 


16px * 1.5 * -25% = -6px 


也 就 是 上 面 的 CSS 代 码 等 同 于 : 


font-size: 16px; 
line-height: 1.5; 


} 
p > img { 
vertical-align: -6px; 


} 





但 是 两 者 又 有 所 不 同 ， 很 显然 ，-25% 是 一 个 相对 计算 属性 值 ， 如 果 
此 时 元 素 的 font-size 发 生变 化 ， 则 图 片 会 自动 进行 垂直 位 置 调整 。 我 
们 可 以 看 一 个 无 论 font-size 如 何 变 化 、 后 面 图 标 都 垂直 拓 中 对 章 的 例 
子 ， 手 动 输入 http:/demo.cssworld.cn/8/1-1.php 或 者 扫 下 面 的 二 维 码 。 可 
以 看 到 ， 无 论文 字 字 号 是 大 还 是 小 ， 后 面 的 图 标 都 非常 恨 好 地 垂直 居中 
对 齐 ， 如 图 8-1 所 示 。 

















图 8-1 永远 垂直 居中 对 齐 的 图 标示 意 





核心 CSS 代 码 如 下 : 


p > img { 
width: 16px; height: 16px; 
vertical-align: 25%; 


position: relative; 
top: 8px; 
} 





原理 如 下 : 内 联 元 素 默 认 基线 对 齐 ， 图 厂 的 基线 可 以 看 成 是 图 片 的 
下 边缘 ， 文 字 内 容 的 基线 是 字符 x 下 边缘 ， 因 此 ， 本 例 中 ， 图 片 下 边缘 
默认 和 “中 文 ?两 个 汉字 字形 底 边 缘 往 上 一 点 的 位 置 对 齐 。 然 后 ， 我 们 通 
过 vertical-align:25% 声 明 让 图 片 的 下 边缘 和 中 文 汉字 的 中 心 线 对 
齐 。 此 时 ， 图 标 和 文字 的 状态 应 该 如 图 8-2 所 示 。 


文字 


图 8-2 图片 下 边缘 和 文字 中 心 线 对 齐 标注 示意 





图 8-2 完 全 就 是 实例 效果 注释 top:8px 后 的 截图 标注 ， 没 有 任何 加 
工 。 看 上 去 似乎 上 面 小 ， 实 际 上 是 视觉 误差， 分 阳线 上 下 完全 均等 ，1 
像素 不 差 。 





由 于 我 们 这 里 的 图 标 是 固定 的 像素 尺寸 ， 因 此 ， 通 过 偏 移 自 和 喘 1/2 
高 度 来 实现 真正 的 居中 ， 可 以 使 用 CSS3 transform 位 移 ， 我 这 里 为 了 
兼容 性 ， 使 用 了 relative 相 对 定位 。 








其 居中 原理 本 质 上 和 绝对 定位 元 素 586% 定 位 加 偏 移 自 吴 1/2 尺 寸 实 
现 居中 是 一 样 的 ， 只 不 过 这 里 的 偏 移 使 用 的 是 vertical-align 白 分 比 
值 。 


这 么 一 看 ，vertical-align 百 分 比 属性 值 似 乎 还 是 有 点 用 的 ! 如 
果 再 联想 到 vertical-align:middle 实 现 垂直 居中 效果 经 常 不 尽 如 人 
意 ， 说 不 定 还 能 找到 一 块 更 好 的 宝 。 但 我 要 告诉 你 ， 其 实 还 有 更 好 的 实 
现 ， 那 就 是 使 用 单位 ex。 例 如 ， 将 前 面 例子 中 的 vertical-align:25% 
改 成 vertical-align: .6ex， 效 果 基 本 上 束 是 一 样 的 ， 并 且 还 多 了 一 
个 优点 ， 就 是 使 用 vertical-align: .6ex 实 现 的 垂直 居中 效果 不 会 受 
line-height 变 化 影响 ， 而 使 用 vertical-align:25%, line-height 
一 旦 变化 ， 就 必须 改变 原来 的 vertical-align 大 小 、 重 新 调整 重 直 位 
置 ， 这 容错 性 明显 就 降 了 一 个 层次 。 








因此 ， 虽 然 例子 演示 的 是 vertical-align 百 分 比值 ， 实 际 上 是 推 
荐 使 用 与 font-size 有 着 密切 关系 的 ex 单位 。 


说 到 这 里 ， 怒 不 住 想 介绍 男 外 一 些 和 font-size 有 着 密切 的 天 系 的 
东西 。 


8.1.2 ”理解 font-size 与 ex、em 和 rem 的 关系 


ex 是 字符 x 高 度 ， 显 然 科 font-size 关 系 密切 ，font-size 值 越 
大 ， 目 然 ex 对 应 的 大 小 也 就 大 ， 对 此 本 书 前 面 已 经 有 介绍 ， 这 里 不 歼 











下 面 来 看 看 单位 em。 如 果 说 ex 是 字符 x 高 度 ， 那 是 不 是 em 就 是 字符 


m 的 高 度 ? 





我 的 回答 是 “不 是 的 "”， 但 是 em 和 字符 m 人 确实 有 关 。em 在 传统 排版 中 
指 一 个 字模 的 高 度 〈 可 以 脑 补 下 活字 印刷 的 字模 ) ， 注 意 是 字模 的 高 








度 ， 不 是 字符 的 高 度 。 其 一 般 由 'M' 的 宽度 决定 (因为 宽 高 相同 ) ， 所 
以 lem。 也 就 是 说 ， ee 
字母 方 方 正 正 的 不 算 多 。 如 果 按 照 这 种 说 法 ， 那 方 方 正 正 的 汉字 岂 不 是 
每 一 个 字 都 正好 一 个 em? 没 错 ， 确 实 是 这 样 ， 尤 其 作为 印刷 体 的 宋体 效 
果 最 为 明显 ， 这 种 表现 在 CSS 中 也 有 非常 明显 的 体现 。 





例如 ， 浏 览 器 默认 font-size 大 小 是 16px， 假 设 一 个 <div> 宽 度 
是 166px， 则 正好 可 以 放下 10 个 汉字 不 换行 ， 如 果 是 159px 像 素 ， 第 十 
个 汉字 就 会 掉 下 来 ， 如 果 再 同时 设置 1ine-height:1 和 一 个 背景 色 ， 代 
码 如 下 : 


div { 
width: 168px; 


line-height: 1; 
background-color: #eee; 


} 








我 们 就 会 发 现 中 文 汉 字 的 尺寸 就 可 以 看 作 em 单 位 的 代名词 ， 尤 其 在 高 度 
一 块 ， 简 直 分 毫 不 差 ， 如 图 8-3 所 示 。 
中 文中 文中 文中 文中 文 


图 8-3 ”汉字 尺寸 和 em 单位 关系 示意 























也 就 是 说 ，em 就 是 ' 中 ' 等 汉字 的 高 度 ! 于 是 ， 我 们 对 em 的 理解 就 
更 加 简单 了 ， 直 接 看 一 个 很 容易 理解 错误 的 题目 ， 在 Chrome 浏 览 器 
下 ，<h1> 元 素 有 如 下 的 默认 CSS: 





hi { 
font-size: 2em; 
-webkit-margin-before: 0.67em; 
-webkit-margin-after: 0.67em; 


那么 ， 假 设 页 面 没有 任何 CSS 重 置 ， 根 元 素 font-size 就 是 默认 的 
16px， 请 问 : 此 时 <h1> 元 素 margin-before 的 像素 计算 值 是 多 少 ? 





如 有 果 对 em 了 解 不 够 ,很 容易 认为 lem 大 小 就 是 16px， 于 是 计算 值 
是 16pxx6.67 = 16.72px， 实 际 上 这 是 错误 的 。 





我 们 可 以 这 样 想 ， 假 设 <Ch1> 里 面 有 汉字 ， 此 时 汉字 的 高 度 是 多 少 ? 
这 个 高 度 束 是 此 时 1em 大 小 。<h1> 元 素 此 时 font-size 是 2em， 算 一 
就 是 32px， 因 此 ， 此 时 里 面 汉 字 的 高 度 应 该 是 32px， 也 就 是 说 ， 此 时 
<h1> 元 素 的 1em 应 该 是 32px， 于 是 margin-before 的 像素 计算 值 
为 32pxx8.67 = 21.44px， 和 浏览 器 自己 的 计算 值 一 样 ， 如 图 8-4 所 


钞 。 





> -webkit-margin-after 21.44px 
= -webkit-margin-before 21.44px 
> -webkit-margin-end Bpx 
> -webkit-margin-start gpx 








图 8-4 Chrome 浏览 器 <h1> 元 素 margin 计 算 值 


乍 一 看 ， 似 乎 出 现 了 死 循 环 悖 论 : font-size:2em， 于 是 1em 变 
成 32px， 那 此 时 的 2em 不 又 是 64px， 然 后 又 .….. 





正如 前 面 所 到 过 的 一 样 ，CSS 世 界 的 泻 染 是 一 次 演 染 ， 是 不 会 有 死 
循环 的 。 这 里 是 先 计算 font-size， 然 后 再 计算 给 其 他 使 用 em 单位 的 属 
性 值 大 小 。 





总 结 如 下 : 在 CSS 中 ，1em 的 计算 值 等 同 于 当前 元 素 所 在 的 font- 
size 计 算 值 ， 可 以 将 其 想象 成 当前 元 素 中 如果 有 ) 汉字 的 高 度 。 


所 有 相对 单位 的 好 处 都 是 一 样 的， 样式 表现 更 具有 弹性 。 例 如 ， 理 
论 上 ， 有 一 个 布局 ， 希望 小 屏 时 整体 缩小 ， 大 屏 时 再 弹性 扩大 ， 此 时 就 
可 以 让 所 有 元 素 宽 高 尺寸 等 都 使 用 em， 于 是 ， 最 后 只 要 改变 布局 祖先 元 
素 的 font-size 大 小 就 可 以 实现 整体 的 弹性 变化 。 

















这 种 集 略 很 棒 ， 也 确实 可 行 ， 但 是 有 一 个 比较 肤 烦 的 事情 ， 它 和 上 
面 <h1> 元 系 计 算 一 样 的 抹 烦 ，em 是 根据 当前 font-size 大 小 计算 的 ， 
一 旦 布局 中 出 现 标 题 这 种 跟 基础 font-size 大 小 不 一 样 的 场景 的 时 候 ， 
标题 里 面 所 有 元 素 em 痢 要 重新 计算 一 这 ， 其 为 腑 烦 ， 最 终 的 成 品 维护 成 
本 就 比较 高 了 。 





正 是 由 于 这 种 局 限 性 ， 另 外 一 个 和 font-size 密 切 相 关 的 单位 出 现 
了 ， 就 是 rem， 邵 root en， 顾名思义， 就 是 根 元 素 em 大 小 。em 相 对 于 当 
前 元 素 ，rem 相 对 于 根 元 素 ， 本 质 差别 在 于 当前 元 素 是 多 变 的 ， 根 元 系 
是 固定 的 ， 也 就 是 说 ， 如 果 使 用 rem， 我 们 的 计算 值 不 会 受 当前 元 
素 font-size 大 小 的 影响 ， 假 设 ch1> 的 默认 CSS 是 这 样 : 











hi { 
font-size: 2em; 


-webkit-margin-before: 0.67rem; 
-webkit-margin-after: 0.67rem; 


} 





那么 2m 的 font-size 计 算 值 会 被 忽略 ， 直 接 使 用 根 元 素 的 16px 进 行 计 
算 ， 于 是 margin- before 计 算 值 是 16 像 素 x0.67 = 10.72 像 素 。 


因此 ， 要 想 实现 带 有 缩放 性 质 的 弹性 布局 ， 使 用 rem 是 最 佳 策略 ， 
但 rem 是 CSS3 单 位 ，IE9 以 上 浏览 器 才 支 持 ， 需 要 注意 兼容 性 ， 我 这 里 
就 不 再 多 介绍 了 。 





回 到 em 单位 。em 实 际 上 更 适用 于 图 文 内 容 展示 的 场景 ， 对 此 进行 弹 
性 布局 。 例 如 ，xh1> 一 <h6> 以 及 <p> 等 与 文本 内 容 展示 的 元 素 的 
margin 都 是 用 em 作为 单位 ， 这 样 ， 当 用 户 把 浏览 器 默认 字号 从 “中 ” 设 
置 成 “大 ”或 改 成 “小 ”的 时 候 ， 上 下 间距 也 能 根据 字号 大 小 自动 调整 ， 使 
阅读 更 舒服 。 

再 举 个 适用 于 em 的 场景 ， 如 果 我 们 使 用 SVG 矢量 图 标 ， 建 议 设置 


SVG 宽 高 如 下 : 


svg { 
width: lem; height: 1lem; 
} 











这 样 ， 无 论 图 标 是 个 大 号 文字 混在 一 起 还 是 和 小 号 文字 混在 一 起 ， 都 能 
和 当前 文字 大 小 保持 一 致 ， 既 省 时 又 省 力 。 


8.1.3 ”理解 font-size 的 关键 字 属 性 值 


font-size 支 持 长 度 值 ， 如 1em， 也 支持 百分比 值 ， 如 166%。 这 两 
点 想必 众所周知 ， 但 font-size 还 支持 关键 字 属 性 值 这 一 点 怕 是 就 有 不 
少 人 不 清楚 了 。 





font-size 的 关键 字 属 性 值 分 以 下 两 类 。 


(1) 相对 尺寸 关键 字 。 指 相对 于 当前 元 素 font-size 计 算 ， 包 
括 : 


。 larger: 大 一 点 ， 是 <big> 元 素 的 默认 font-size 属 性 值 。 
。smaller: 小 一 点 ， 是 <small> 元 素 的 默认 font-size 属 性 值 。 


(2) 绝对 尺寸 关键 字 。 与 当前 元 素 font-size 无 关 ， 仅 受 浏 览 器 
设置 的 字号 影响 。 注 意 这 里 的 措辞 ， 是 “浏览 器 设置 >， 而 非 “ 根 元 素 ”， 
两 者 是 有 区 别 的 。 





。Xxx-large: 好 大 好 大 ， 和 <h1> 元 素 计算 值 一 样 。 

。X-large: 好 大 ， 和 <h2> 元 素 计算 值 一 样 。 

。 large: 大 ， 和 <h3> 元 素 计 算 值 近似 〈“ 近 似 ” 指 计算 值 偏 差 在 1 像 
素 以 内 ， 下 同 ) 。 

。medium: 不 上 不 下 ， 是 font-size 的 初始 值 ， 和 <h4> 元 素 计 算 值 
一 样 。 为 了 解决 大 家 可 能 有 的 疑问 ， 这 里 有 必要 多 说 几 句 。 如 果 
font-size 默 认 值 是 medium， 而 medium 计 算 值 仅 与 浏览 器 设置 有 
关 ， 那 为 何 我 们 平时 元 素 font-size 总 是 受 环境 影响 变 来 变 去 呢 ? 














这 完全 是 因为 font-size 属 性 的 继承 性 ， 实 际 开发 的 时 候 ， 我 们 常 
常会 对 <htm1> 或 <body> 重 置 font-size 大 小 ， 例 如 : 
body { 


font-size: 14px; 


} 


于 是 ， 受 继承 性 影响 ， 大 多 数 后 代 元 素 的 font-size 计 算 值 也 变 成 
了 14px，medium 这 个 初始 值 受 继承 性 影响 而 被 履 盖 了 。 





。small: 小 ， 和 <h5> 元 素 计 算 值 近似 。 
x-small: 好 小 ， 和 <h6> 元 素 计算 值 近 似 。 
xx-small: 好 小 好 小 ， 无 对 应 的 HTML 元 素 。 


其 中 ， 相 对 尺寸 关键 字 1larger 和 smaller 由 于 计算 的 系数 在 不 同 浏 





览 髓 下 兰 异 很 大 ， 因 此 实用 价值 有 限 ， 只 有 类 似 文档 页 、 帮 助 页 这 类 对 
文字 尺寸 要 求 不 局 的 场合 才 有 用 ; 而 绝对 尺寸 关键 字 的 实用 性 要 大 一 
些 ， 而 且 在 茶 些 场合 是 推荐 使 用 的 关键 字 属 性 值 ， 这 个 要 慢 慢 讲 。 





首先 ， 我 抛 出 一 个 简单 的 问题 : 下 面 两 个 CSS 代 码 有 什么 区 别 ? 


html { 
font-size: 14px; 


} 
html { 
font-size: 87.5%; 


} 





在 绝 大 多 数 场 景 下 ， 两 者 没有 差别 ， 全 都 计算 为 14px， 但 是 如 采用 
户 对 浏览 器 的 字号 进行 了 调整 ， 例 如 ， 把 默认 的 “中 ”设置 成 了 “大 ”， 如 
图 8-5 所 示 “〈 截 目 Chrome 浏 览 器 ) ， 那 么 此 时 ，font-size:14px 计 算 
值 还 是 14px， 但 font- size:87.5% 的 计算 值 则 大 了 一 圈 ， 于 是 差别 就 
出 现 了 。 如 果 是 像素 单位 font-size， 用 户 改 变 浏览 器 的 默认 字号 后 ， 
页 面 会 微 丝 不 动 ; 如 果 是 百分比 值 font-size， 则 字号 相应 放大 ， 这 就 
涉及 用 户 体 验 和 可 访问 性 问题 了 。 


网 络 内 容 











网 络 有 
极 大 


图 8-5 ”Chrome 浏览 器 设置 网 页 内 容 的 字号 为 大 








正常 情况 下 ，14 像 系 的 文字 大 小 是 足够 的 ， 但 是 ， 如 果 是 高 度 近视 
的 用 户 ， 或 者 上 班 急 急忙 忙 忘记 戴 眼镜 ， 或 者 在 投影 仪 上 投影 网 页 内 


容 ， 此 时 残 有 大 字号 浏览 网 页 的 需求 ， 如 果 使 用 固定 的 像 系 单位 ， 显 然 
对 这 些 使 用 场景 是 不 友好 的 。 





好 在 浏览 器 还 提供 了 “网 页 缩放 ”功能 ， 但 是 此 功能 也 是 有 局 限 性 
的 : 如 果 网 页 是 定 筑 非 响应 式 的 ， 则 网 页 放大 后 窗 体 以 外 的 内 容 束 看 不 
到 了 ， 在 Chrome/Firefox 浏 览 器 下 甚至 连 个 水 平 滚动 条 都 没有 ， 说 不 定 
重要 信息 束 会 看 不 到 。 由 此 可 见 ， 我 们 是 不 能 轻易 忽视 浏览 器 字号 设置 
功能 的 。 

















然而 ， 现 代 网 页 设计 得 很 精致 ， 要 想 网 页 布局 跟随 字体 内 容 缩放 实 
在 两 难 ， 要 么 使 用 em， 但 em 计算 与 当前 font-size 耘 合 ， 不 好 维护 ， 要 
么 使 用 rem， 但 IE8 不 文 持 ， 桌 面 端 使 用 篮 座 。 因 此 ， 现 实 的 压迫 导致 我 
们 只 能 使 用 px 进行 布局 ， 尤 其 桌面 端 网 页 。 














如 何 权 衡 “ 易 于 实现 维护 “视觉 还 原 “ 可 访问 性 ”这 三 者 ， 我 这 里 有 
两 个 珍藏 的 建议 。 


(1) 即使 是 定 宽 的 传统 果 面 端 网 页 ， 也 需要 做 啊 应 式 处 理 ， 尤 其 
古 针 对 1200 像 素 宽 度 设计 的 网 页 ， 但 只 需要 啊 应 到 800 像 素 即 可 ， 可 以 
保证 至 少 有 1.5 倍 的 缩放 空间 ， 如 有 果 做 到 这 一 步 ， 那 么 是 否 需要 啊 应 浏 
览 髓 的 字号 设置 这 一 点 就 可 以 忽略 。 











(2) 如 果 困 各 种 原因 无 法 做 啊 应 式 处 理 ， 也 疫 有 必要 全 局 都 使 用 
相对 单位 ， 毕 竞 成 本 等 现实 问题 摆 在 那里 ， 其 实 只 需要 在 图 文 内 容 为 主 
的 重要 局 部 区 域 使 用 可 缩放 的 font-size 处 理 即 可 。 例 如 ， 小 说 网 站 的 
阅读 页 、 微 信 公 众 号 文章 展示 区 、 私 信 对 话 内容 区 、 搜 索引 擎 的 落地 
页 、 评 论 区 等 ， 都 强烈 建议 据 弃 px 单位 ， 而 采用 下 面 的 实践 策略 。 











。 容器 设置 font-size:medium， 此 时 ， 这 个 局 部 展示 区 域 的 字号 就 
跟着 浏览 器 的 设置 走 了 ， 默 认 计 算 值 是 16px。 

。 容器 内 的 文字 字号 全 部 使 用 相对 单位 ， 如 百分比 值 或 者 em 都 可 以 ， 
然后 基于 16px 进 行 转换 。 例 如 : 





.article { 
font-size: medium; 


} 

.article hi { 
font-size: 2em; 
margin: .875em 6; 


.article p { 


font-size: 87.5%; /* 默认 字号 下 计算 值 是 14px */ 
margin: 1lem 0; 














同时 使 用 自 适 应 流体 布局 ， 间 距 什 么 的 也 使 用 相对 单位 ， 例 如 上 
面 margin 使 用 的 是 em 单位 。 于 是 ， 当 用 户 改 变 了 浏览 费 的 字号 后 ， 整 
个 阅读 区 域 的 所 有 人 字样 甚至 布局 都 会 跟着 放大 ， 文 字 一 下 子 就 看 清楚 
了 。 这 种 局 部 处 理 的 好 处 在 于 ， 页 面 的 导航 、 侧 边栏 这 些 不 需要 长 时 间 
阅读 的 模块 还 是 原来 的 像素 布局 ， 还 是 那么 精致 ， 丝 毫 不 受 影响 。 就 这 
么 很 微小 的 变动 ， 就 可 以 让 你 的 网 页 在 可 访问 性 这 一 块 超越 大 多 数 的 网 
站 ， 何 乐 而 不 为 ? 


























可 以 看 到 ， 绝 对 尺寸 关键 字 在 实际 项 目 中 还 有 很 有 价值 的 ， 但 有 价 
值 的 仅仅 是 medium， 至 于 其 他 关键 字 ， 作 用 仅 限 于 字面 上 的 那 点 儿 ， 
大 家 了 解 一 下 即 可 。 


8.1.4 font-size:6 与 文本 的 隐藏 


损 面 Chrome 浏 览 器 下 有 个 12px 的 字号 限制 ， 就 是 文字 的 font- 


size 计 算 值 不 能 小 于 12px， 我 猜 是 因为 中 文 ， 如 宋体 ， 要 是 小 于 
12pXx， 就 会 挤 成 成 一 团 ， 略 丑 ，Chrome 看 不 下 去 ， 就 直接 禁用 了 。 





正 是 这 种 限制 导致 我 们 在 使 用 em 或 rem 进 行 布局 的 时 候 ， 不 能 这 人 么 
处 理 : 
html { 


font-size: 62.5%; 
} 








理论 上 ， 此 时 根 字 号 计算 值 是 16px*6.625=16px， 于 
width:14px 可 以 写成 width:1.4em， 省 了 很 多 计算 的 麻烦 。 但 

， 在 Chrome 下 ， 由 于 12px 的 限制 ， 根 字号 计算 值 实际 不 是 16px， 而 
是 12px， 所 以 ， 可 以 试 试 处 理 成 这 样 : 


html { 
font-size: 625%; 
} 


此 时 根 字 号 计算 值 是 168px， 既 计算 无 忧 ， 义 没有 12px 的 最 小 字号 
限制 。 


讨 fi 








但 是 我 个 人 建议 还 是 不 要 这 样 处 理 ， 尤 其 使 用 em 的 时 候 ， 
为 font-size 属 性 和 1line-height 属 性 一 样 ， 由 于 继承 性 的 存在 ， 会 影 
响 贯 穿 整个 网 页 ，166px 的 环境 font-size 一 定 会 将 平时 不 显 山 露水 的 
故 边 对 齐 问题 、 间 际 问 题 等 放大 ， 导 致 出 现 一 些 明显 的 样式 问题 ， 如 果 
对 CSS 了 解 不 是 很 深刻 ， 怕 是 很 难 明白 为 什么 会 发 生 这 样 的 问题 。 同 时 
这 样 做 也 限制 了 px 等 其 他 单位 的 使 用 ， 有 时 候 是 比较 要 命 的 。 











因此 ， 我 的 建议 是 仍 基于 浏览 右 默 认 的 字号 进行 相对 计算 ， 也 束 


是 medium 对 应 的 16px，16 这 个 数字 是 一 定 可 以 整除 的 ， 因 此 计算 成 本 
还 行 ， 或 者 使 用 Sass 或 Less 之 类 的 工具 辅助 计算 。 


还 是 回 到 字号 限制 的 问题 。 实 际 上 ， 并 不 是 所 有 小 于 12px 的 font- 
size 都 会 被 当 作 12px 处 理 ， 有 一 个 值 例外 ， 那 就 是 0， 也 束 是 说 ， 如 果 
font-size:6 的 字号 表现 就 是 0， 那 么 文字 会 直接 被 隐藏 掉 ， 并 且 只 能 
是 font-size:6， 哪 怕 设 置 成 font-size:6.6699661px， 都 还 是 会 被 
当 作 12px 处 理 的 。 





因此 ， 如 果 和 希望 隐藏 1ogo 对 应 元 素 内 的 文字 ， 除 了 text-indent 
缩 进 隐藏 外 ， 还 可 以 试 试 下 面 这 种 方法 : 
.logo { 


font-size: 8; 


} 


8.2 ”字体 属性 家 族 的 大 家 长 font-family 


CSS 世 界 中 的 有 很 多 属性 都 是 以 font- 开 头 的 ， 如 font- 
style、font-weight 和 这 里 要 介绍 的 font-family， 我 把 所 有 这 些 以 
font -开头 的 CSS 属 性 统称 为 “字体 属性 家 族 ”。 就 最 终 的 深度 、 广 度 和 
应 用 程度 来 看 ，font-family 有 点 儿 神 似 “ 字 体 属 性 家 族 ” 的 大 家 长 ， 其 
实 从 其 名 字 上 就 能 看 出 点 味道 来 ， 顾 名 思 义 ，font-family 就 是 “字体 
家 族 ” 的 意思 。 








font-family 默 认 值 由 操作 系统 和 浏览 器 共同 决定 ， 例 如 Windows 
和 OS X 下 的 Chrome 默 认 字 体 不 一 样 ， 同 一 台 Windows 系 统 的 Chrome 和 
Firefox 浏 览 器 默认 字体 也 不 一 样 。 








font-family 文 持 两 类 属性 值 ， 一 类 是 “字体 名 ”， 一 类 是 “字体 
族 ”。“ 字 体 名 ”很 好 理解 ， 束 是 使 用 的 对 应 字体 的 名 称 。 例 如 : 





body { 
font-family: simsun; 


} 








就 表示 使 用 的 是 “宋体 ”。 如 果 字 体 名 包含 空格 ， 需 要 使 用 引号 包 起 来 。 
例如 : 


body { 
font-family: 'Microsoft Yahei'; 


} 


根据 我 的 实践 ， 可 以 不 用 区 分 大 小 写 。 如 果 有 多 个 字体 设 是 ， 从 左 往 右 





依次 寻找 本 地 是 否 有 对 应 的 字体 即 可 。 例 如 : 


body { 


font-family: "PingFang SC', 'Microsoft Yahei'; 
} 











就 是 先 寻 找 是 耕 本 地 有 PingFang SC 字体 ; 如果 没有 ， 则 继续 寻找 本 地 
是 否 有 JMicrosoft Yahei 字 体 ， 如 果 都 没 找 到 ， 就 使 用 默认 值 。 


但 是 , “字体 族 ” 分 为 很 多 类 ，MDN 上 文档 分 类 如 下 : 


font-family: serif; 
font-family: sans-serif; 
font-family: monospace; 


font-family: cursive; 
font-family: fantasy; 
font-family: system-ui; 





具体 合 义 解释 如 下 。 


。 serif: 衬 线 字体 。 

。 sans-serif: 无 衬 线 字体 。 
。 monospace: 等 宽 字 体 。 

。 cursive: 手写 字体 。 

。 fantasy: 奇幻 字体 。 

。 system-ui: 系统 UI 字体 。 








对 于 中 文 网 站 ，cursive 和 fantasy 应 用 场景 有 限 ， 因 此 这 里 不 巴 
探讨 ， 这 里 着 重 介绍 一 下 衬 线 字体 、 无 衬 线 字体 和 等 宽 字 体 。 


8.2.1 了 解 讨 线 字体 和 无 衬 线 字体 


字体 分 衬 线 字 体 和 无 衬 线 字 体 。 所 谓 衬 线 字 体 ， 通 俗 讲 就 是 笔画 开 
始 、 结 束 的 地 方 有 额外 装饰 而 且 笔 国 的 粗细 会 有 所 不 同 的 字体 。 网 页 中 
第 用 中文 衬 线 字 体 是 “宋体 ”， 第 用 英文 衬 线 字 体 有 Times New Roman、 
Georgia 等 。 无 衬 线 字体 没有 这 些 额 外 的 装饰 ， 而 且 笔画 的 粗细 差 不 
多 ， 如 中 文 的 “ 雅 黑 ”字体 ， 瑞 文 包括 Arial、Verdana、Tahoma、 


Helivetica、Calibri 等 。 








以 前 人 们 排 正 文 喜欢 使 用 衬 线 字体 ， 但 是 如 今 ， 不 知 是 审美 疫 邢 还 
古人 们 更 加 追求 简 少 干净 的 缘故 ， 更 喜欢 使 用 无 衬 线 字 体 ， 如 “微软 雅 
黑 ? 或 者 “ 毕 方 ”之 类 的 字体 。 





在 CSS 世 界 中 ， 字 体 是 有 对 应 的 属性 值 的 ， 如 下 : 


font-family: serif; /* 衬 线 字 体 */ 





font-family: sans-serif; /* 无 衬 线 字 体 */ 


我 们 在 移动 端 Web 开 发 的 时 候 ， 虽 然 设 备 的 默认 中 文字 体 不 一 样 ， 
但 都 是 无 衬 线 ， 都 挺 好 看 的 ， 因 此 可 以 直接 使 用 下 面 的 CSS 代 码 : 





body { 
font-family: sans-serif; 


} 





没有 必要 特别 指定 中 文字 体 ， 否 则 说 不 定 会 画蛇添足 。 


serif 和 sans-serif 还 可 以 和 具体 的 字体 名 称 写 在 一 起 ， 例 如 : 


body { 


font-family: "Microsoft Yahei", sans-serif; 


} 





但 是 需要 注意 的 是 ，serif 和 sans-serif 一 定 要 写 在 最 后 ， 因 为 
在 大 多 数 浏览 器 下 ， 写 在 serif 和 sans-serif 后 面 的 所 有 字体 都 会 被 
忽略 。 例 如 : 


body { 


font-family: sans-serif, "Microsoft Yahei"; 


} 








在 Chrome 浏 览 占 下 ， 后 面 的 Microsoft Yahei 字 体 是 不 会 被 泻 染 的 。 据 我 
的 推测 ， 有 可 能 浏览 器 认为 当前 “字体 族 ” 已 经 满足 了 文本 泻 染 的 需要 ， 
没 必 要 再 往 后 解析 了 。 


8.2.2 ”等 宽 字体 的 实践 价值 








所 谓 等 宽 字 体 ， 一 般 是 针对 英文 字体 而 言 的 。 据 我 所 知 ， 东 亚 字 体 
应 该 都 是 等 宽 的 ， 就 是 每 个 字符 在 同等 font-size 下 占据 的 宽度 是 一 样 








的 。 但 是 英文 字体 就 不 一 定 了 ， 我 随便 写 一 个 单词 ， 就 iMac 吧 ， 大 家 很 
明显 地 发 现 这 个 字符 i 要 比 M 占 据 的 宽度 小 。 如 果 这 样 看 着 还 不 够 清楚 ， 
那 我 换 一 种 呈现 方式 ， 上 下 两 行 ， 上 一 行 6 个 i， 下 一 行 6 个 M， 如 下 : 





111111 


MMMMMM 





实际 的 两 行文 本 的 宽度 可 能 就 如 图 8-6 所 示 这 般 关 异 明显 。 


但 是 ， 如 果 是 等 宽 字 体 〈 可 以 让 英文 字符 同等 宽度 显示 的 字体 就 称 
为 “等 宽 字 体 ”) ， 如 Consolas、Monaco、monospace， 则 宽度 表现 就 不 
一 样 了 ， 如 图 8-7 所 示 。 


Mill 
MMMMMM 
图 8-6” 非 等 宽 字体 效 果 


于 和 
MMNMMMM 


图 8-7 “等 宽 字体 下 的 效果 
等 宽 字 体 在 Web 中 有 什么 用 呢 ? 


1. 等 宽 字 体 与 代码 呈现 





此 ， 一 般 编辑 器 使 用 的 字体 或 者 Web 上 需要 呈现 源 代码 的 字体 都 是 等 宽 
字体 。 例 如 ， 即 将 出 现 的 演示 页 面 的 源 代码 如 图 8-8 所 示 。 





边框 类 型 : <select class="monospaced"> 


<option value="solid”" selected>—————— </Option> 

<option value="dashed">-------* </option> 

<option value="dotted">.......</option> 
</Sselect> 


<div id="border" class="border"»></diVv> 


图 8-8 某 源 代码 展示 所 段 


2. 等 宽 字体 与 图 形 呈 现 案例 一 则 





假设 某 工 具有 这 么 一 个 功能 : 通过 下 拉 选 择 ， 可 以 改变 元 素 的 边框 
样式 ， 也 就 是 borderStyle 在 solid/dashed/dotted 间 切换 。 


大 家 都 知道 ， 原 生 的 <select> 的 <option> 元 素 的 ijnnerHTML 只 能 
是 纯 text 字 符 ， 不 能 有 html， 也 不 支持 伪 元 素 ， 因 此 ， 要 模拟 solid、 





dashed 和 dotted， 只 能 使 用 字符 ， 而 字符 有 长 有 短 ， 可 以 模拟 成 像样 
的 规整 的 图 形 吗 ? 


可 以 的 ， 试 试 使 用 等 宽 字 体 。 手 动 输入 http:/demo.cssworld.cn/8/2- 
1.php 或 者 扫 下 面 的 二 维 码 。 最 终 效 果 如 图 8-9 所 示 。 









边框 类 型 : 


图 8-9 ”等 宽 字 体 模 拟 边框 类 型 示意 


3，ch 单 位 与 等 宽 字体 布局 


ch 和 em、rem、ex 一 样 ， 是 CSS 中 和 字符 相关 的 相对 单位 。 和 ch 相 
关 的 字符 是 0， 没 错 ， 就 是 阿拉 伯 数 字 0。1ch 表 示 一 个 0 字符 的 宽度 ， 所 
以 6 个 8 所 占据 的 宽度 就 是 6ch。 


但 是 我 们 网 页 内 容 的 字符 不 可 能 都 是 0， 所 以 这 个 单位 乍 看 就 显得 
很 鸡肋 。 但 是 ， 如 果 和 等 宽 字 体 在 一 起 使 用 ， 它 就 可 以 发 挥 不 一 样 的 威 
pa 


由 于 ch 是 个 CSS3 单 位 ， 且 IE9 浏 览 器 的 宽度 和 其 他 浏览 器 明显 不 一 
样 ， 因 此 此 处 不 展开 ， 但 可 以 提 一 提 一 些 不 错 的 应 用 场景 。 例 如 ， 有 些 
输入 框 是 输入 手机 号 的 ， 在 中 国 ， 手 机 号 是 11 位 ， 因 此 我 们 可 以 设置 该 
输入 框 宽 度 为 11ch， 同 时 让 字体 等 宽 ， 则 用 户 一 眼 就 能 看 出 自己 是 否 少 
输入 或 者 多 输入 了 1 位 数字 。 又 如 ， 我 们 想 实现 一 个 屏幕 上 代码 一 个 一 
个 出 现 的 动 效 ， 如 果 代 码 是 等 宽 字 体 ， 此 时 使 用 ch 单位 来 控制 宽度 ， 配 
合 overflow 属 性 和 CSS animation 就 能 在 完全 不 使 用 JavaScript 的 情况 
下 将 此 效果 模拟 出 来 。 当 然 ， 还 有 其 他 一 些 应 用 场景 ， 不 一 一 说 明 。 














8.2.3 ”中 文字 体 和 英文 名 称 


虽然 一 些 常见 中 文字 体 ， 如 宋体 、 微 软 雅 黑 等 ， 直 接 使 用 中 文 名 称 
作为 CSS font-family 的 属性 值 也 能 生效 ， 但 我 们 一 般 都 不 使 用 中 文 名 
称 ， 而 是 使 用 英文 名 称 ， 主 要 是 为 了 规避 乱码 的 风险 。 还 有 一 些 中 文字 
体 直接 使 用 中 文 名 称 作为 CSS font-family 的 属性 值 是 没有 效果 的 ， 如 
思源 黑体 、 兰 军 黑体 等 ， 需 要 使 用 字体 对 应 的 英文 名 称 才 可 以 生效 。 








总 而 言 之 一 句 话 ， 要 想 使 用 中 文字 体 ， 就 必须 要 知道 其 对 应 的 英文 
名 称 。 下 面 就 是 我 整理 的 一 些 常见 中 文字 体 对 应 的 font-family 英 文 属 
性 名 称 。 








(1) Windows 篆 见 内置 中 文字 体 和 对 应 英文 名 称 见 图 8-10。 


字体 中 文 名 


微软 正 黑体 


SimSun 

SimHei 

Microsoft Yahei 
Microsoft JhengHei 
KaiTi 

NSimSun 


FangSong 


图 8-10 ”Windows 中 常见 内 置 中 文字 体 和 对 应 英文 名 称 





(2) OS X 系 统 内 置 中 文字 体 和 对 应 英文 名 称 见 图 8-11。 


字体 中 文 名 字体 英文 名 


苹 方 PingFang SC 
华文 黑体 sTHeiti 

华文 楷体 STKaiti 

华文 宋体 STSong 

华文 仿宋 STFangsong 
华文 中 宋 STZhongsong 


华文 政 珀 STHvupo 
华文 新 魏 STXinwei 
厅 文 习 书 STLiti 


华文 行情 STHinghac 


冬青 黑体 简 Hiragino Sans GB 
兰亭 黑 - 简 Lantinghei SC 
解 翩 体 - 疝 Hanzrpen SC 


手札 体 - 简 Hannotate SC 


宋体 - 简 Songti SC 
娃娃 体 - 简 Wawati SC 
魏 确 - 简 Weibei SC 
行 禄 - 商 Nenghac SC 
雅 病 - 简 Yapi SC 
圆 体 - 简 Yuanti SC 


图 8-11 OS X 常 见 内 置 中 文字 体 和 对 应 英文 名 称 
(3) Office 软 件 安 装 新 增 中 文字 体 和 对 应 英文 名 称 见 图 8-12。 


(4) 其 他 一 些 中 文字 体 和 对 应 英文 名 称 见 图 8-13。 


华文 细 黑 


华文 楷体 


万 下 舒 体 


方正 姚 体 


字体 英文 名 
YouYuan 
LiSua 
sixihei 
STKaiti 
STSong 
STFangsong 
STZhongsong 
SCaeimca 
STHvupo 
STXinwei 
STLiti 
ST7Hirghae 
FZShuTi 


FZYaoti 


图 8-12 ”Office 安 装 新 增 中 文字 体 和 对 应 英文 名 称 


字体 中 文 名 字体 英文 名 
思源 黑体 Source Han Sans CN 
思源 宋体 Source Han Serif SC 


文 录 经 微米 里 ”WenQuanYi Micro Hei 


图 8-13 ”其 他 一 些 中 文字 体 和 对 应 英文 名 称 
8.2.4 一 些 补 充 说 明 


微软 正 黑 体 是 一 款 全 面 支 持 ClearType 技 术 的 TrueType 无 衬 线 字体 ， 
用 于 繁体 中 文系 统 。 相 对 应 地 ， 中 国 大 陆地 区 用 的 是 微软 雅 黑 。 对 于 微 
软 雅 黑 和 微软 正 黑 ， 不 好 简单 地 用 简体 或 者 繁体 来 区 分 ， 因 为 这 两 套 字 
体 都 同时 包含 了 比较 完整 的 简体 和 繁体 汉字 ， 以 确保 在 简体 和 繁体 混 排 
的 页 面 上 能 够 完美 地 显示 。 但 由 于 中 国 大 陆 和 中 国 港 、 澳 、 台 地 区 在 各 
目的 文字 规范 中 对 汉字 的 写法 规定 有 很 多 细节 上 的 不 同 ， 所 以 这 两 套 字 
形 在 正式 场合 是 不 能 混 请 使 用 的 。 

















我 们 平常 所 说 的 “宋体 ”， 指 的 都 是 “中 易 宋 体 ”"， 英 文 名称 
SimSun, “黑体 ”类 似 的 是 “中 易 黑 体 ”。 在 OS X 常 见 内 置 中 文字 体 中 我 罗 
列 了 一 个 “宋体 - 简 ”， 需 要 注意 的 是 ， 这 个 “宋体 - 简 ” 和 我 们 平常 所 说 
的 “宋体 ”并 不 是 同一 个 字体 ， 其 英文 名 称 是 “Songti SC”， 字 形 表 现 也 有 


雷 弄 ， 要 注意 曼 别 。 








在 OS X 也 就 是 苹果 操作 系统 的 字体 名 称 中 经 常会 出 现 “SC”， 这 
个 “SC” 指 的 是 “简体 ”(simplified chinese) 的 意思 ， 相 对 应 的 还 
有 “TC”， 指 的 是 “繁体 ”(traditional chinese) 的 意思 。 


Windows 系 统 本 身 默 认 的 中 文字 体 并 不 多 ， 和 QOS X 操 作 系 统 相 比 述 
色 很 多 ， 尤 其 是 OS X 操 作 系 统 中 的 “ 关 关 人 体 ”“ 手 札 体 ?等 几 个 手写 体 就 非 
常 棒 ! 但 是 好 在 Windows 操 作 系 统 安装 Office 的 比例 相当 高 ， 因 此 如 果 
不 是 要 求 非常 严格 的 话 ， 我 们 还 是 可 以 使 用 很 多 中 文字 体 的 ， 如 “华文 
行 楷 ”“ 华 文 新 魏 ”*“ 华 文 隶 书 ” 等 华文 字体 。 其 中 ,，“ 华 文 黑体 "和 “华文 细 
黑 ” 有 一 段 故事 : OS X 10.6 版 本 之 前 , “华文 黑体 ”由 “华文 细 
黑 ?”(STXihei〉 和 “华文 黑体 ”(STHeiti〉 这 两 个 字 重 组 成 ,但 OS X10.6 














之 后 “华文 黑体 ”重组 ， 就 没有 “华文 细 黑 ”这 么 一 说 了 。 因 此 ， 我 把 “ 华 

文 细 黑 ” 归 在 了 Office 安 装 字 体 一 类 ， 而 将 “华文 黑体 ” 归 在 OS X 之 中 。 根 
据 我 的 测试 ， 这 两 个 字体 并 不 能 随意 互通 有 无 ， 而 且 似 乎 还 与 浏览 器 有 
关系 : OS X 系 统 下 ， 似 乎 Safari 能 够 癌 下 兼容 “华文 细 黑 >，Chrome 却 不 


可 以 ; 反 过 来 ，Windows 系 统 下 ， 无 法 识别 “华文 黑体 ”(STHeiti) 。 又 
或 者 是 使 用 * 圆 体 ”，Windows 系 统 下 有 个 “ 幼 圆 >，OS X 下 有 个 “ 圆 体 - 
简 ”， 都 是 统一 风格 的 字体 ， 也 是 可 以 在 实际 项 目 中 沦 试 使 用 的 。 








所 有 英文 名 称 大 小 写 都 经 过 一 定 的 考量 ， 并 不 是 随便 设 定 的 ， 虽 然 
说 CSS font-family 对 名 称 的 大 小 写 不 怎么 敏感 ， 但 是 根据 我 的 经 验 ， 
最 好 至 少 首 字 母 要 大 写 ， 和 否则 在 使 用 CSS unicode-range 的 时 候 可 能 会 
遇 到 一 些 麻 烦 。 








“思源 黑体 ?和 “思源 宋体 ”是 Adobe 与 Google 合 作 推出 的 开源 字体 。 
其 设计 目标 是 可 以 广泛 用 于 多 种 用 途 的 计算 机 字体 ， 比 如 用 于 手机 、 平 
板 或 者 桌面 的 用 户 界 面 、 网 页 浏览 或 者 电子 书 阅读 等 ， 均 包含 7 个 字 
重 。 因 为 思源 黑体 和 思源 宋体 字体 集成 到 Google 的 泛 Unicode 字 体系 列 
《 称 为 Noto〉 中 ， 所 以 不 少 网 站 及 资料 会 显示 “思源 黑体 ” 严 文 名 称 
是 “Noto Sans CJK SC”， 这 是 Google 的 称呼 。 然 而 ， 根 据 我 的 测试 ， 这 





种 英文 名 称 在 Windows 和 OS XX 系统 下 都 是 无 效 的 ，Adobe 的 名 称 “Source 
Han Sans CN” 可 以 正常 显示 。 





“ 文 果 驿 微米 黑 是 Google Droid 的 开源 衍生 字体 。Droid 字 体系 是 
Google 包 含 在 著名 的 开源 手机 平台 Android 系 统 中 的 默认 字体 ， 其 中 的 
Droid Sans Fallback 包 含 CJK 标 准 汉字 16000 余 个 ， 是 目前 所 知 为 数 不 多 
的 开源 中 文字 体 之 一 (也 是 继 文 果 驿 正 黑 之 后 第 二 个 开源 中 文 黑 体 ) 。 
由 于 该 字体 的 设计 目标 是 手机 等 租 入 式 设备 ， 与 其 他 常见 中 文字 体 比 
较 ， 其 一 个 显著 的 优点 是 文件 极为 精简 ， 只 有 不 到 3 MB。 





本 节目 前 所 展示 的 或 是 系统 字体 ， 或 是 开源 字体 ， 如 果 和 希望 知道 一 
些 需 要 付费 购买 的 版 权 字 体 的 英文 名 称 ， 如 某 些 汉 仪 字体 或 者 方正 字 
体 ， 可 以 参见 我 的 博客 文章 : http:/www.zhangxinxu.com/ wordpress/? 
p=5474。 





8.3 ”字体 家 族 其 他 成 员 


8.3.1 貌似 粗 六 、 实 则 精细 无 比 的 font-weight 





font-weight 表 示 “ 字 重 ”， 通 俗 点 讲 ， 就 是 表示 文字 的 粗细 程度 。 





对 于 font-weight 这 个 属性 ， 我 们 平时 使 用 都 相当 粗 久 ， 无 非 束 是 
下 面 这 两 个 CSS 声 明 : 


font-weight: normal; 
font-weight: bold; 





以 至 于 很 多 人 就 误 认 为 font-weight 的 作用 就 是 让 文字 加 粗 或 者 下 
常 ， 但 实际 上 ，font- weight 这 个 属性 可 谓 “ 张 飞 穿 针 ” 一 一 粗 中 有 
细 ， 而 且 是 精细 无 比 ! 


首先 让 我 们 大 致 了 解 一 下 font-weight 都 支持 哪些 属性 值 。 有 具体 如 
下 : 

















/* 平 第 用 的 最 多 的 */ 








font-weight: normal; 
font-weight: bold; 


/* 相对 于 父 级 元 素 */ 
font-weight: lighter; 
font-weight: bolder; 











/* 字 重 的 精细 控制 */ 
font-weight: 1060; 
font-weight: 266; 
font-weight: 3060; 
font-weight: 4060; 
font-weight: 566; 
font-weight: 6060; 
font-weight: 766 





font-weight: 8060; 
font-weight: 9060; 





可 以 看 到 ，font-weight 文 持 十 多 个 属性 值 ，normal 和 bold 这 两 
个 关键 字 仅仅 是 众多 属性 值 的 冰山 一 角 。 


所 有 这 些 属性 值 ， 都 可 以 从 font-weight:166 至 font- 
weight:966 说 起 。 


。 166: 文字 很 细 ， 细 如 发 丝 。 

。 266: 文字 很 轻 ， 轻 如 鸿毛 。 

。 366: 文字 较 轻 ， 轻 如 飞 燕 。 

。 466: 文字 正常 ， 等 同 normal。 
。 566: 文字 不 粗 不 细 ， 不 轻 不 重 。 
。 666: 文字 略 粗 ， 粗 如 小 腿 。 

。 766: 文字 加 粗 ， 等 同 bold。 

。 866: 文字 超 粗 ， 粗 如 大 腿 。 

。 966: 文字 很 重 ， 重 如 泰山 。 








有 人 可 能 会 有 疑问 : 我 是 不 是 可 以 自 创 一 个 font-weight:550 的 
写法 ? 答案 是 : 不 可 以 。 如 果 使 用 数值 作为 font-weight 属 性 值 ， 必 须 
是 169~ 一 986 的 整 百 数 。 因 为 这 里 的 数值 仅仅 是 外 表 长 得 像 数 值 ， 实 际 
上 是 一 个 具有 特定 含义 的 关键 字 ， 并 且 这 里 的 数值 关键 字 和 字母 关键 字 
之 间 是 有 对 应 关系 的 ， 例 如 ，font-weight:466 实 际 上 等 同 于 font- 
weight: normal，font-weight:766 等 同 于 font-weight:bold。 
此 ， 如 采 我 们 希望 让 某 些 文字 的 粗细 变 得 正常 ， 也 可 以 使 用 font- 
weight:466， 与 使 用 normal 相 比 少 了 3 个 字母 ; 同样， 如 果 和 希望 文字 





加 粗 ， 也 可 以 使 用 font-weight:78686， 与 使 用 bo1d 相 比 少 了 1 个 字母 。 


因此 ， 很 显然 ，4686 和 7686 是 文字 粗细 与 否 的 重要 临界 点 ， 加 上 最 
小 的 18686 和 最 大 的 9886， 就 构成 了 font-weight 完 整 的 字 重 临界 点 。 知 
道 这 个 有 什么 意义 呢 ? 意义 就 在 于 ，1Lighter 和 bolder 这 两 个 具有 相对 
特定 的 关键 字 就 是 基于 这 4 个 临界 点 进行 解析 和 演 染 的 。 








这 里 有 必要 再 强调 一 下 ，1ighter 和 bolder 是 基于 临界 点 进行 解析 
的 ， 千 万 不 要 想当然 地 认为 是 根据 当前 字 重 上 下 168 加 加 减 减 后 的 效 
果 。 例 如 ， 先 font-weight:166， 然 后 再 font-weight:bolder 后 的 
font-weight 计 算 大 小 是 466， 而 不 是 1966。 完 整 解 析 关 系 参 见 表 8-1。 








表 8-1 1ighter 和 bolder 解 析 规 则 表 











466 1606 








下 面 关 键 问 题 来 了 。 很 多 人 会 发 现 ，font-weight 无 论 是 设 
置 386、466、566 还 是 666， 文 字 的 粗细 都 没有 任何 变化 ， 只 有 到 766 
的 时 候 才 会 加 粗 一 下 ， 感 觉 浏览 器 好 像 不 支持 这 些 数值 ， 那 么 搞 这 么 多 
档 位 不 就 是 多 余 的 吗 ? 


实际 上 ， 所 有 这 些 数值 关键 字 浏 览 器 都 是 支持 的 ， 之 所 以 没有 看 到 
任何 粗细 的 变化 ， 是 因为 我 们 的 系统 里 面 缺乏 对 应 粗细 的 字体 。 尤 其 我 
们 做 介面 端 项 目 时 ， 大 部 分 用 户 都 是 使 用 Windows 系 统 ， 而 Windows 系 
统 中 的 中 文字 体 粗细 就 一 个 型 号 ， 如 “宋体 ”， 或 者 说 “微软 雅 黑 ”， 
此 ， 最 终 的 效果 就 是 CSS 层 面 的 “加 粗 * 和 “正常 尺寸 "两 种 表现 。 








假如 我 们 的 操作 系统 安装 了 该 字体 家 族 全 部 的 字 重 字体 ， 则 设置 
300、400、500 时 ， 彼 此 之 间 就 能 看 出 明显 的 变化 了 。 例 如 ，OS X 系 统 
中 的 “ 苹 方 ”， 又 如 我 这 里 即将 要 演示 的 “思源 黑体 ”。 “思源 黑 体 ” 是 一 款 
免费 的 开源 字体 ， 我 自己 电脑 上 的 版 本 有 7 个 字 重 ， 如 图 8-14 所 示 。 


| SourceHanSansCN-Bold.otf 

| SourceHanSansCN-ExtralLight.otf 
SourceHanSansCN-Heavy.otf 

| SourceHanSansCN-Light.otf 

s_ SourceHanSansCN-Medium.otf 

» SourceHanSansCN-Normal.otf 


SourceHanSansCN-Regular.otf 








图 8-14 “思源 黑体 ”7 个 不 同 字 重 的 字体 





此 时 ， 应 用 如 下 HTML 和 CSS 代 码 : 


鸿毛 ， 
鸿毛 ， 
鸿毛 ， 
鸿毛 ， 
充 毛 ， 
闻 毛 ， 
闻 毛 ， 


<p class="f166"> 轻 如 
<p class="f266"> 轻 如 
<p class="f366"> 轻 如 
<p class="f466"> 轻 如 
<p class="f566"> 轻 如 














济济 济 洲 济 





A 


洲 





<p class="f666"> 轻 妇 
<p class="f766"> 轻 妇 
<p class="f866"> 轻 如 鸿毛 ， 
<p class="f966"> 轻 如 鸿毛 ， 
p { font-family: "Source 
.f166 { font-weight: 166 1 
.f266 { font-weight: 26808; 
.f366 { font-weight: 366 1 
.f466 { font-weight: 466 1 
.f566 { font-weight: 566 1 
.f666 { font-weight: 666 1 

{ 

{ 

{ 


A 


洲 





洲 


机 














im Hm Hm Hm mh Hm Hm mh mh 
D> 




















王 


.f766 { font-weight: 766 
.f866 { font-weight: 866 1 
.f966 { font-weight: 966 1 





结果 可 以 看 到 明显 的 字 重 变化 ， 而 不 是 单纯 的 加 粗 和 正常 两 种 形态 ， 如 
图 8-15 所 示 。 


轻 如 鸿毛 ， 重 如 泰山 
轻 如 鸿毛 ， 重 如 泰山 
轻 如 鸿毛 ， 重 如 泰山 
轻 如 鸿毛 ， 重 如 泰山 
轻 如 鸿毛 ， 重 如 泰山 
轻 如 鸿毛 ， 重 如 泰山 
轻 如 鸿毛 ， 重 如 泰山 
轻 如 鸿毛 ， 重 如 泰山 
轻 如 鸿毛 ， 重 如 泰山 


图 8-15 “思源 黑体 ”在 CSS 不 同 font-weight 值 下 的 效果 


也 束 是 说 ，font-weight 要 想 真 正 友 挥 潜力 ， 问 题 不 在 于 CSS 的 支 
持 ， 而 在 于 是 否 存在 对 应 的 字体 文件 。 如 果 没 有 对 应 的 字体 文件 ， 我 又 
想 有 多 档 字 重 效果 ， 该 怎么 办 呢 ? 可 以 试 试 去 8.5 节 看 看 能 不 能 找到 答 


案 。 




















8.3.2 ”具有 近似 姐妹 花 属性 值 的 font-style 


font-style 表 示 文 字 造 型 是 斜 还 是 正 ， 与 font-weight 相 比 ， 其 
属性 值 就 要 少 很 多 ， 如 下 : 


font-style: normal; 


font-style: italic; 
font-style: oblique; 





其 中 ，italic 和 oblique 这 两 个 关键 字 都 表示 “和 斜体 ”的 意思 ， 可 以 说 是 
一 对 姐妹 花 属 性 。 但 就 好 比 双胞胎 一 样 ， 就 算 长 得 再 像 也 会 有 差别 ， 那 
么 italic 和 oblique 这 两 个 关键 字 的 差别 在 哪里 呢 ? 


差别 在 于 : italic 是 使 用 当前 字体 的 斜体 字体 ， 而 oblique 只 是 单 
纯 地 让 文字 倾斜 。 如 果 当 前 字体 没有 对 应 的 斜体 字体 ， 则 退 而 求 其 次 ， 





解析 为 oblique， 也 就 是 单纯 形状 倾斜 。 


我 们 平常 在 Web 上 使 用 比较 多 的 中 文字 体 ， 如 “宋体 ”微软 雅 
黑 ” 等 ， 是 没有 专门 的 倾斜 字体 的 ， 因 此 ， 从 最 终 表 现 上 来 看 font- 
style:italic 和 font-style:oblique 是 没有 区 别 的 。 但 是 ， 对 于 一 
些 英 文字 体 ， 如 “Georgia”， 人 情况 就 不 一 样 了 ， 因 为 “Georgia” 有 一 个 专 
门 设计 的 斜体 字体 文件 。 我 们 不 妨 简 单 测 试 一 下 ，HIML 和 CSS 代 码 如 
下 : 














<p class="i">Georgia italic</p> 
<p class="0">Georgia oblique</p> 
<p>Georgia normal</p> 


p { font-size: 58px; font-family: Georgia; } 
.i { font-style: italic; } 
.0 { font-style: oblique; } 











结果 可 以 看 出 ， 两 个 “倾斜 "有 着 明显 的 不 同 ， 例 如 非常 明显 的 字母 g， 
属性 值 为 让 alic 时 长 得 像 鱼 钩 ， 而 为 oblique 时 长 得 像 糖 其 半 ， 如 图 8- 
16 所 示 。 


Georgia italic 
Georg1ia oblique 
Georgla normal 


图 8-16 “Georgia” 字 体 不 同 的 “倾斜 ”效果 


之 所 以 会 专门 为 一 个 字体 设计 倾 冬 字 体 ， 束 是 因为 单纯 倾斜 的 时 候 
不 好 看 ， 比 方 说 上 面 的 “Georgia” 字 体 ， 当 字号 比较 小 同时 文字 倾斜 的 时 


候 ， 字 符 会 挤 作 一 团 ， 下 密 不 规则 ， 可 读 性 比较 糟糕 。 相 比 之 下 ， 专 门 
设计 的 “Georgia” 和 斜体 阅读 体验 就 要 好 很 多 。 再 加 上 没有 斜体 字体 时 
italic 表 现 会 和 ob1lique 一 致 ， 因 此 ， 我 们 在 实际 开发 的 时 候 ， 几 乎 没 
有 任何 理由 需要 使 用 font-style:oblique。 


8.3.3 ”不 适合 国情 的 font-variant 


font-variant 是 一 个 从 IE6 时 代 就 过 来 的 CSS 属 性 ， 对 于 我 们 大 中 
华 用 户 ， 其 支持 的 属性 值 和 作用 让 我 们 这 些 汉 字 用 户 觉得 有 些 头 疼 ， 实 
现 小 体型 大 写字 母 ， 两 个 属性 值 要 么 normal， 要 么 small- 
caps，font-variant:smal1l-caps 就 是 可 以 让 英文 字符 表现 为 小 体型 








大 写字 母 。 
代码 示意 如 下 : 


http://www.<span style="font-variant:small-caps">css-world.com</span>/ 





结果 如 下 : 


http://WWWw.css-WoRLD.coM 


也 就 是 大 小 跟 小 写字 母 一 样 ， 但 样式 是 大 写 ， 我 想 在 母语 是 英文 的 国家 
这 个 属性 估计 部 用 得 不 多 ， 所 以 ， 大 家 简单 了 解 一 下 束 可 以 了 。 


8.4 ” ”font 属性 


8.4.1 ”作为 缩写 的 font 属 性 


如 果 在 一 段 CSS 代 码 中 发 现 了 font 属 性 ， 八 九 不 离 十 就 是 利用 font 
属性 进行 文本 相关 样式 的 缩写 。 可 以 缩写 在 font 属 性 中 的 属性 非常 
多 ， 包 括 font-style、font-variant、font-weight、font- 


size、line-height、font-family 等 。 完 整 语法 为 : 








[ [ font-style || font-variant || font-weight ]? font-size [ / line-height 
]? 


font-family ] 








| | 表示 或 ，? 和 正则 表达 式 中 的 ?的 含义 一 致 ， 表 示 0 个 或 1 个 。 仔 细 
观察 上 面 的 语法 ， 会 发 现 font-size 和 font-family 后 面 没有 问号 ， 也 
就 是 说 是 必需 的 ， 是 不 可 以 省 略 的 。 这 和 background 属 性 不 一 
样 ，background 属 性 虽然 也 文 持 缩写 ， 但 是 并 没有 需要 两 个 属性 值 同 
时 存在 的 限制 。 





因此 ， 如 果 你 的 font 属 性 缩写 无 效 ， 检 查 一 下 font-size 和 font- 
family 这 两 个 属性 是 否 同时 存在 。 例 如 ， 下 面 CSS 语 句 看 上 去 写 了 很 多 
属性 ， 实 际 却 是 无 效 的 ， 因 为 缺 字体 : 


.font { font: normal 766 14px/26px; } 


而 下 面 这 个 反而 是 有 效 的 : 


.font { font: 14px '8'; } 











需要 注意 的 是 ，font 缩 写 会 破坏 部 分 属性 的 继承 性 。 举 个 简单 的 例 
子 ， 假 设 你 的 页 面 行 高 是 28px， 当 你 使 用 了 下 面 的 CSS 后 : 


.font { font: 466 36px 'Microsoft Yahei'; } 


.font 元 素 的 行 高 line-height 属 性 值 就 被 重 置 为 了 normal， 而 不 同 浏 
览 器 上 1line- height:normal 是 不 一 样 的 ， 因 此 ， 在 使 用 font 缩 写 的 
时 候 ， 如 果 不 设 定 行 高 值 ， 一 定 会 出 现 不 兼容 的 问题 。 换 名 话说 ， 如 果 
你 的 CSS 代 码 原本 就 没有 Line-height 属 性 ， 使 用 font 缩 写 反而 是 不 推 
荐 的 。 





另外 ， 还 有 一 个 令 人 很 头疼 的 问题 ， 就 是 font 缩 写 必须 要 带 
上 font-family， 然 而 ， 原 本 真实 继承 的 font-family 属 性 值 可 能 会 很 
长 ， 每 次 font 缩 写 后 面 都 挂 一 个 长 长 的 字体 列表 ， 令 人 很 是 不 悦 ， 有 什 
么 小 技巧 可 以 避免 吗 ? 





这 里 有 两 个 方法 。 





方法 一 : 我 们 可 以 随便 找 一 个 系统 根本 不 存在 的 字体 名 占 位 ， 如 字 
母 9， 或 者 特殊 一 点 ， 用 笑脸 表情 @， 然 后 再 设置 font- 
family:inherit 来 重 置 这 个 占 位 字体 。 例 如 ， 我 们 想 把 字号 和 行 蜗 合 
并 缩写 ， 就 可 以 这 样 : 





.font { 
font: 36pXx/36pX "8 


font-family: inherit; 


} 








古 不 是 有 点 拆 东 墙 补 西 墙 的 感觉 ? 这 么 做 主要 是 因为 font 缩 写 不 能 





使 用 inherit 等 全 局 关键 字 。 


方法 二 : 利用 @font face 规 则 将 我 们 的 字体 列表 重 定义 为 一 个 字 
体 ， 这 是 兼容 性 很 好 、 效 益 很 高 的 一 种 解决 方法 ， 会 在 8.5 节 详细 介 


绍 。 


8.4.2 ”使 用 关键 字 值 的 font 属 性 


font 属 性 除了 缩写 用 法 ， 还 文 持 关键 字 属 性 值 ， 这 个 人 是 很 多 人 都 
不 知道 的 。 其 语法 如 下 : 





font:caption | icon | menu | message-box | small-caption | status-bar 


如 果 将 font 属 性 设置 为 上 面 的 一 个 值 ， 就 等 同 于 设置 font 为 操作 
系统 该 部 件 对 应 的 font， 也 就 是 说 直接 使 用 系统 字体 。 


根据 W3C 官 方 维基 的 解释 ， 以 及 我 自己 在 Windows 系 统 下 的 测试 ， 
各 个 关键 字 的 含义 如 下 。 


caption: 活动 窗口 标题 栏 使 用 的 字体 。 

icon: 包含 图 标 内 容 所 使 用 的 字体 ， 如 所 有 文件 夹 名 称 、 文 件 名 
称 、 人 磁盘 名 称 ， 甚 至 浏览 器 窗口 标题 所 使 用 的 字体 。 

menu: 菜 蛙 使 用 的 字体 ， 如 文件 夹 六 蛙 。 

message-box: 消息 盒 里 面 使 用 的 字体 。 

small-caption: 调 色 板 标题 所 使 用 的 字体 。 

status-bar: 窗 体 状态 栏 使 用 的 字体 。 


使 用 示例 : 


-menu { font: menu; } 





需要 注意 的 是 ， 使 用 关键 字 作为 属性 值 的 时 候 必须 是 独立 的 ， 不 能 
添加 font-family 或 者 font-size 之 类 的 ， 这 和 font 属 性 缩写 不 是 一 个 
路 子 。 如 果 混 用 ， 例 如 : 


.menu { font: 14px menu; } 


则 此 时 的 menu 是 作为 自 定义 的 字体 名 称 存在 的 ， 而 不 是 表示 系统 的 
menu 荣 单字 体 。 





实际 上 ，font 关 键 字 属性 值 本 质 上 也 是 一 种 缩写 ， 里 面 已 经 包含 了 
诸如 font -size 等 信息 ， 如 图 8-17 一 图 8-19 所 示 。 


使 用 的 系统 字体 关键 字 是 : caption 

使 用 的 系统 字体 天 键 字 是 :icon 

使用 的 竺 统 字 估 关 乌 字 旦 : menu 

使 用 的 系统 字体 关键 字 是 : message-box 
使 用 的 系统 字 依 关 锥 字 是 ; small-caption 


使 户 的 竺 统 字 佑 关 镀 字 旺 ; status-bar 








图 8-17 Windows 7 Chrome 下 font 关 键 字 属性 值 效 果 


使 用 的 系统 字体 关键 字 是 : caption 

使 用 的 系统 字体 关键 字 是 : icon 

使 用 的 系统 字体 关键 字 是 : menu 

使 用 的 系统 字体 关 乌 字 是 : message-box 
使 用 的 系统 字体 关键 字 是 : small-caption 


使 用 的 系统 字 依 关 馆 字 旦 ; status-bar 





图 8-18 ”Windows 7 IE 浏 览 器 font 关 键 字 属性 值 效果 


这 3 张 图 透露 出 不 少 重 要 的 信息 。 从 Windows 下 Chrome 和 下 浏览 器 
部 分 关键 字 的 字体 和 字号 表现 不 一 样 可 以 看 出 ， 同 一 系统 下 浏览 器 的 表 
现 是 有 差异 的 。 就 这 么 一 说 ， 好 像 也 没什么 ， 但 是 如 果 我 们 深入 思考 ， 
就 会 发 现 这 背后 是 有 问题 的 : 既然 font 关 键 字 属性 值 的 样式 表现 是 跟着 
系统 走 的 ， 那 为 何 同一 系统 下 不 同 浏览 器 的 表现 会 不 一 样 呢 ?” 显 然 是 某 
个 浏览 器 出 现 了 问题 。 后 来 ， 通 过 设置 修改 Windows 系 统 相 关 控 件 的 默 
认 字 体 我 发 现 ， 这 次 是 Chrome 浏 览 器 拖 了 后 
腿 。caption、icon、message-box 这 3 个 关键 字 在 Windows 系 统 下 的 
Chrome 浏 览 器 中 似乎 是 无 效 的， 并 不 会 实时 跟着 系统 字体 走 ， 也 残 是 
说 ， 就 算 手动 修改 了 操作 系统 的 字体 ， 这 3 个 关键 字 还 是 显示 浏览 器 默 
认 的 宋体 ， 就 算 浏 览 器 重启 、 浏 览 器 升级 外 加 系统 重启 也 没有 用 ; 而 
且 ，menu 这 个 关键 字 表 示 的 并 不 是 “ 沫 单 ”， 而 是 “ 调 色 板 标题 *smal1- 
caption。 而 所 有 这 些 问 题 在 Firefox 和 I 下 浏览 器 中 一 个 都 没有 ， 表 现 非 
常 一 致 ， 非 常 符合 预期 例如， 修改 “图 标 ” 字 体 为 “思源 黑体 ”"， 如 图 8- 
20 所 示 ， 则 所 有 文件 名 称 全 部 变 成 了 “思源 黑体 ”"， 同 时 font:icon 所 在 
元 素 font-family 计 算 值 也 成 了 “思源 黑体 ”"， 如 图 8-21 所 示 。 

















使 用 的 系统 字体 关键 字 是 : caption font-size:13px; 

使 用 的 系统 字体 关键 字 是 : icon font-size:13px; 

使 用 的 系统 字体 关键 字 是 : menu font-size:13px; 

使 用 的 系统 字体 关键 字 是 : message-box font-size:13px; 
使 用 的 系统 字体 关键 字 是 : small-caption font-size:12px; 


使 用 的 系统 字体 关键 字 是 : status-bar font-size:12px; 


图 8-19 ”OS X Chrome 下 font 关 键 字 属性 值 效 果 





项 目 们 : 大 小 (D): 














图 标 "| 32EE 
字体 (FP): 大 小 (E): 
| 思源 黑体 CN Normal -| |24 -| 








图 8-20 ”设置 系统 “图 标 项 目 ” 字 体 为 “思源 黑体 ” 








使 用 的 系统 字体 关键 字 星 : icon font-size:12px font-family: 转 源 旱 体 CN Norrr 


图 8-21 ”font:icon 表 现 为 “思源 黑体 ” 


考虑 到 Chrome 浏 览 器 的 市 场 占 有 率 ， 我 们 在 使 用 font 属 性 的 时 
候 ， 要 避 开 caption、icon 和 message-box 这 3 个 关键 字 。 


对 于 不 同 的 操作 系统 ， 字 体 表现 不 一 样 ， 这 是 预料 之 中 的 ， 毕 竟 使 
用 系统 字体 ， 而 不 同系 统 默认 字体 肯定 是 不 一 样 的 ， 然 后 字体 大 小 也 不 
一 样 。 例 如 ， 在 Windows 下 Chrome 的 caption 字 体 大 小 16px， 而 在 OS 
X 下 却 只 有 13px。 因 此 ， 在 实际 使 用 时 ， 我 们 还 需要 在 一 下 面 再 设 定 一 
下 font-size 大 小 来 保证 一 致 性 。 照 理 讲 ， 直 接 这 样 设 置 就 可 以 了 : 


html { 
font: menu; 


font-size: 16px; 


} 





但 是 ， 实 际 上 ，IE8 浏 览 器 会 英名 其 妙 地 忽略 这 里 的 font-size:16px， 
因此 ， 一 般 都 是 下 面 这 样 处 理 : 


html { font: menu; } 
body { font-size: 16px; } 


除了 caption、icon、menu、message-box、small-caption 和 和 


status-bar， 还 有 很 多 其 他 非 标 准 的 关键 字 ， 如 
button、checkbox、checkbox-group、cCombo- 
box、desktop、dialog、document、field、hyperlink、]1ist- 
menu、 menu-item、menubar、outline-tree、password、pop-up- 
menu、 pull-down-menu、push-button、radio-button、radio- 
group、range、signature、tab、tooltip、window 和 workspace。 
不 过 ， 这 些 关 键 字 浏览 器 大 多 不 文 持 ， 尺 管 Firefox 浏 览 器 文 持 一 部 分 ， 
但 是 需要 添加 私有 前 级 -moz-。 例 如 : 


font: -moz-button; 


因此 ， 它 们 的 实际 应 用 价值 不 大 。 男 外 ，WebKit 浏 览 器 还 支持 其 他 关键 
字 ， 如 font: -webkit- control， 如 图 8-22 所 示 。 


-webkit- i 

-webkit-control 

bod, jj -webkit-mini-control 
colorj-webkit-pictograph 

} -webkit-small-control 

body { -Webkit- -large 


font: |-webki EE 
| -wehkitT-+FonT- NE antiali 


图 8-22 ” WebKit 支持 的 font 关 键 字 属性 值 





这 些 私 有 关键 字 的 价值 仅 限 于 了 解 。 
8.4.3 ” font 关键 字 属 性 值 的 应 用 价值 


说 了 这 么 多 ，font 关 键 字 属 性 值 的 价值 如 何 呢 ? 有 没有 合适 的 使 用 
场景 呢 ? 有 ， 并 且 相 当 适 合 








， 非 常 多 网 站 的 通用 font-family 直 接 就 是 : 


html { font-family: "Microsoft YaHei'; } 





知道 问题 在 哪里 吗 ? 这 样 一 设置 ， 就 意味 着 所 有 操作 系统 下 的 所 有 
浏览 器 都 要 使 用 “微软 雅 黑 * 字 体 。 假 如 说 用 户 的 jMac 或 者 macbook 因 为 
某 些 原因 安装 了 “微软 雅 黑 ” 字 体 ， 那 岂 不 是 这 些 系统 原本 更 加 漂亮 的 中 
文字 体 就 不 能 使 用 了 ? 


于 是 ， 人 们 就 会 有 这 样 的 需求 : 希望 非 Windows 系 统 下 不 要 使 
用 “微软 雅 黑 ? 字 体 ， 而 是 使 用 其 系统 字体 。 怎 么 处 理 呢 ? 


一 种 方法 是 可 以 试 试 使 用 非 标准 的 -apple-system 等 关键 字 字 体 ， 
具体 方法 如 下 : 





html { font-family: -apple-system, BlinkMacSystemFont, 'Microsoft YaHei'; } 


这 能 够 一 定 程 度 上 满足 我 们 的 需求 ， 但 是 毕 竞 是非 标 准 的 属性 值 ， 
说 不 定 哪 天 就 被 浏览 占 舍 弃 了 ， 因 此 寿 非 迫不得已 ， 还 是 少 用 为 妙 。 











顺便 多 说 两 句 ， 实 际 上 还 真有 标准 的 系统 字体 关键 字 ， 叫 
作 system-ui， 使 用 示例 如 下 : 


html { font-family: system-ui; } 


在 我 写 这 段 内 容 的 时 候 ， 仅 Chrome 浏 览 器 支持 它 〈 从 版 本 56 开 
始 ) ， 并 且 ， 根 据 我 的 在 Windows 电 脑 上 的 测试 ，Chrome 浏 览 器 的 
system-ui 指 的 就 是 “ 调 色 板 标题 ?对 应 关键 字 smal1-caption 使 用 的 字 
体 ， 有 点 儿 出 乎 我 的 意料 。 





压轴 的 总 在 最 后 ， 显 然 还 有 个 更 好 的 方法 就 是 使 用 这 里 的 font 关 键 
字 ， 这 是 标准 属性 ，10 年 前 浏览 器 就 文 持 了 ， 可 以 放心 使 用 。CSS 代 码 
如 下 《双人 先 二 即 可 ) 
html { font: menu; } 
body { font-size: 16px; } 


html { font: small-caption; } 


body { font-size: 16px; } 


html { font: status-bar; } 
body { font-size: 16px; } 





没有 洋洋 酒 酒 的 字体 列表 ， 简 简单 单 的 儿 个 声明 就 可 以 让 各 个 系统 
使 用 各 自 引 以 为 傲 的 字体 。 有 人 说 “我 有 选择 鸭 惧 症 ， 不 知 该 使 用 哪 一 
个 "， 那 束 选 最 短 最 好 记 的 那个 : 


html { font: menu; } 
body { font-size: 16px; } 


最 后 ， 我 要 对 font 关 键 字 属 性 值 的 用 法 做 一 个 点 评 。 





让 网 页 的 字体 跟 系 统 走 ， 对 设计 师 而 言 ， 其 实 是 一 个 比较 冒险 的 做 
法 ， 因 为 最 终 呈现 的 字体 是 不 可 控 的 。 举 个 例子 ， 某 女生 非常 喜欢 可 爱 
风格 ， 于 是 束 把 她 的 电脑 主题 变 成 了 非常 可 爱 的 风格 ， 琳 单 栏 的 字体 全 
部 变 成 那 种 很 可 爱 的 字体 ， 此 时 ，font:menu 所 呈现 的 就 不 是 “微软 雅 
黑 ”， 而 是 这 个 用 户 定义 的 “可 爱 字 体 ”"， 这 可 能 不 是 设计 师 想 看 到 的 ， 
因为 往往 会 跟 上 自己 的 网 页 设计 风格 不 一 致 。 但 是 ， 转 念 一 想 ， 万 一 这 是 
用 户 想 看 到 的 呢 ? 既然 用 户 把 自己 的 主题 设 为 该 字体 ， 那 束 说 明 这 个 用 
户 对 这 个 字体 并 不 排斥 ， 而 是 喜欢 。 当 她 浏览 网 页 的 时 候 ， 发 现 就 你 的 
网 站 呈现 出 了 她 喜欢 的 那 种 字体 ， 你 说 会 不 会 给 用 户 一 种 “你 懂 我 的 











心 * 的 感觉 呢 ? 对 用 户 而 言 ， 反 而 成 了 一 种 情感 化 的 设计 ! 


另外 ， 让 网 页 的 字体 跟 系统 走 ， 还 有 一 个 更 加 长 远 的 好 处 。 随 着 软 
件 的 不 断 有 发展， 我们 的 操作 系统 的 默认 中 文字 体 一 定 是 越 来 越 好 看 ， 如 
果 网 页 的 font-family 定 死 为 茶 个 字体 ， 用 户 束 无 法 及 时 至 受到 新 系统 
新 字体 带 来 的 愉悦 的 视觉 感受 。 举 个 例子 ，OS X 的 默认 中 文字 体 其 实 
已 经 变 过 好 多 次 了 ， 例 如， 你 今天 写 了 个 页 面 ， 字 体 设置 为 很 潮 的 “ 玄 
方 ”， 过 两 年 说 不 定 会 出 来 更 好 的 名 叫 “ 梨 方 ” 的 字体 ， 我 打包 票 ， 网 站 
绝对 是 不 会 跟 进 的 ， 因 为 大 多 数 的 线 上 项 目 维护 都 不 会 管 font-family 
这 种 边 边 角 角 的 事情 ， 因 此 ， 束 所 很 多 年 过 去 了， 网 站 使 用 的 依然 是 老 
字体 。 但 是 ， 如 果 使 用 的 是 font 关 键 字 属性 值 ， 就 完全 不 会 有 这 样 的 问 
题 ， 网 站 字体 能 时 时 刻 刻 与 时 俱 进 。 











8.5 真正 了 解 @font face 规 则 


很 多 人 只 要 一 提 到 @font face 规 则 ， 心 中 就 会 不 由 自主 “ 哦 ”地 一 
声 :“ 这 个 我 知道 ， 可 以 用 来 生成 自 定义 字符 小 图 标 ! ” 话 是 没 错 ， 问 题 
在 于 很 多 人 以 为 生成 字符 小 图 标 就 是 @font face 规 则 的 全 部 ， 实 际 上 
这 只 是 其 功能 之 一 ， 一旦 真正 了 解 @font face 规 则 ， 你 会 发 
现 ，@font face 规 则 可 以 做 的 事情 其 实 非常 多 。 





8.5.1 @font face 的 本 质 是 变量 


虽然 说 CSS3 新 世界 中 才 出 现 真 正 意义 上 的 变量 var， 但 实际 上 ， 在 
CSS 世 界 中 已 经 出 现 了 本 质 上 就 是 变量 的 东西 ，@font face 规 则 就 是 
其 中 之 一 。@font face 本 质 上 就 是 一 个 定义 字体 或 字体 集 的 变量 ， 这 
个 变量 不 仅仅 是 简单 地 自 定义 字体 ， 还 包括 字体 重 命名 、 默 认 字 体 样式 


设置 等 。 














@font face 规 则 支持 的 CSS 属 性 有 font-family、src、font- 
style、 font-weigh、unicode-range、font-variant、font- 


stretch 和 font-feature-settings。 例 如 : 


@font-face { 
font-family: ‘example'; 
src: url(example.ttf); 
font-style: normal; 
font-weight: normal; 


unicode-range: U+6625-606FF ; 
font-variant: small-caps; 
font-stretch: expanded; 
font-feature-settings: "ligal" on; 





属性 还 是 挺 多 的 ， 而 且 有 些 属 性 估计 是 他 认识 你 ， 你 不 认识 他 。 但 
是 从 实用 角度 来 讲 ， 有 些 属性 其 实 可 以 不 用 去 深 完 ， 比 如 font- 
variant、font-stretch 和 font-feature- settings 这 3 个 属性 。 为 
什么 呢 ? 因为 按照 我 的 经 验 ， 这 3 个 属性 给 我 感觉 更 像 是 专 为 英文 设计 
的 ， 所 以 如 果 不 是 有 业务 需要 ， 可 以 先 放 一 放 。 再 加 上 后 两 个 是 CSS3 
新 属性 ， 本 书 残 不 做 进一步 介绍 了 。 




















好 ， 现 在 ， 是 不 是 感觉 压力 一 下 子 小 了 很 多 ? 我 们 需要 在 意 的 可 以 
目 定 义 的 属性 就 只 剩 下 下 面 这 些 : 
@font-face { 


font-family: 'example'; 
src: url(example.ttf); 


font-style: normal; 
font-weight: normal; 
unicode-range: U+6625-66FF ; 








估计 有 人 会 有 疑惑 : @font -face 规 则 中 的 font-style、font- 
weight 和 unicode- range 这 些 属性 有 什么 用 ， 尤 其 是 font-style 和 
font-weight。 实 际 上 ， 这 里 的 每 个 属性 都 不 是 泛泛 之 辜 ， 都 是 有 故事 
的 。 





我 们 一 个 一 个 来 介绍 。 有 必要 预先 说 明 一 下 ， 为 了 更 清晰 地 示意 ， 
下 面 的 CSS 示 意 代码 都 刻意 做 了 简化 处 理 。 


1. font-family 





这 里 的 font-family 可 以 看 成 是 一 个 字体 变量 ， 名 称 可 以 非常 随 
意 ， 如 直接 用 一 个 美元 符 写 '$'。 例 如 : 





@font-face { 
font-family: '$'; 


src: url(example.ttf); 


} 











非 耻 浏览 器 下 甚至 可 以 直接 使 用 纯 空 格 " '。 不 过 有 一 点 需要 注 
就 是 使 用 这 些 黎 奇 古怪 的 字符 或 者 空格 的 时 候 ， 一 定 要 加 引号 。 


涡 











虽然 说 自己 变量 名 可 以 很 随意 ， 但 是 有 一 类 名 称 不 能 随便 设置 ， 就 
是 原本 系统 就 有 的 字体 名 称 。 例 如 ， 如 果 使 用 下 面 的 代码 从 此 “微软 雅 
黑 ” 字 体 就 变 成 了 这 里 example .ttf 对 应 的 字体 了 。 








@font-face { 
font-family: "Microsoft Yahei'; 


src: url(example.ttf); 


} 





2. src 


src 表 示 引 入 的 字体 资源 可 以 是 系统 字体 ， 也 可 以 是 外 链 字 体 。 如 
果 是 使 用 系统 安装 字体 ， 则 使 用 local( ) 功 能 符 ， 如 果 是 使 用 外 链 字 
体 ， 则 使 用 ur1() 功 能 符 。 由 于 local( ) 功 能 符 IE9 及 其 以 上 版 本 浏览 器 
才 支 持 ， 非 常 实 用， 而 本 书目 标 浏览 器 包含 IE8 浏 览 器 ， 因 此 不 做 展 
开 ， 有 兴趣 的 读者 可 以 参考 我 的 博客 文章 : http:/www.zhangxinxu.com/ 
wordpress/?p=6063 。 


因此 ， 这 里 着 重 介绍 url1() 功 能 符 。 


目前 在 业界 ， 凡 是 使 用 目 定义 字体 的 ， 差 不 多 都 是 下 面 这 种 格式 : 





@font-face { 
font-family: ICON; 
src: url('icon.eot') format('eot'); 


src: url('icon.eot?#iefix') format('embedded-opentype'), 
url('icon.woff2') format("woff2") 
url('icon.woff') format("woff"), 
url('icon.ttf') format("typetrue"), 
url('icon.svg#icon') format('svg'); 

font-weight: normal; 

font-style: normal; 


} 








不 知 大 家 有 没有 思考 过 : 为 什么 这 里 需要 有 两 个 src 呢 ?#iefix 是 
干什么 用 的 呢 ? format() 功 能 符 有 什么 作用 ， 可 不 可 以 省 略 ? 这么 多 
字体 格式 都 是 需要 的 吗 ? font-weight: normal 和 font- 
style:normal 是 不 是 多 余 的 ? 


先 解答 一 下 字体 格式 的 问题 。 上 面 这 段 CSS 代 码 一 共 出 现 了 5 种 字 
体格 式 ， 分 别 是 .eot、.woff2、.woff、.ttf 和 .svg。 


。 svg 格 式 是 为 了 兼容 iOS 4.1 及 其 之 前 的 版 本 ， 考 虑 到 现 如 今 iOS 的 
版 本 数 已 经 翻 了 一 番 ， 所 以 svg 格 式 的 兼容 代码 大 可 舍弃 。 

。 eot 格 式 是 下 私有 的 。 注 章 ， 目 前 所 有 版 本 的 下 浏览 器 都 支持 eot 格 
式 ， 并 不 是 只 有 IE6 一 正 8 文 持 。 只 是 ，IE6 一 下 8 仅 文 持 eot 这 一 种 
字体 格式 。 

。 Woff 是 web open font format 儿 个 词 的 站 字母 简写 ， 是 专门 为 Web 开 

发 而 设计 的 字体 格式 ， 显 然 是 优先 使 用 的 字体 格式 ， 其 字体 尺寸 更 

小 ， 加 载 更 快 。Android 4.4 开 始 全 面 支持 。 

woff2 是 比 woff 尺 寸 更 小 的 字体 ， 小 得 非常 明显 。 因 此 ，Web 开 发 
一 首选 字体 就 是 woff2， 只 是 此 字体 目前 仅 Chrome 和 Firefox 文 持 

得 比较 好 。 

ttf 格 式 作为 系统 安装 字体 比较 多 ，Web 开 发 也 能 用 ， 就 是 尺寸 大 











了 点 儿 ， 优 点 在 于 老 版 本 Android 也 支持 。 

综合 上 面 的 分 析 ， 我 们 可 以 得 到 如 下 的 结论 。 

(1) svg 格式 果断 舍弃 。 

(2) 如 果 无 须 兼 容 IE8 浏 览 器 ，eot 格 式 果 汤 舍弃 。 

(3) 如 果 无 须 兼 容 Android 4.3 之 前 版 本 手机 ，ttf 格 式 果 断 含 弃 。 


也 就 是 说 ， 之 所 以 上 面 会 放 这 么 多 字体 格式 ， 完 全 是 因为 “兼容 
性 ”这 3 个 字 。 如 果 你 的 项 目 没 有 那么 多 兼容 顾虑 ， 大 可 精简 一 些 代码 。 
当然 ， 如 果 站 在 用 户 的 角度 ， 字 体格 式 多 一 点 儿 也 没什么 ， 反 正 现 在 都 
是 工具 生成 的 ， 多 了 几 十 个 字母 而 已 ， 又 不 会 产生 多 余 的 请 求 ， 说 不 定 
真有 用 户 使 用 古 重 手机 呢 ， 那 不 就 赚 到 了 ? 





上 面 说 的 话 很 在 理 ， 但 这 并 不 表示 上 面 的 代码 就 没有 优化 的 空间 
了 。 正 如 上 面 提 到 的 ， 应 当 优先 使 用 woff2， 然 后 是 woff 格 式 字体 。 但 
是 ， 如 果 我 们 仔细 看 上 面 的 代码 就 会 发 现 ， 在 下 浏览 器 下 ， 使 用 的 永远 
是 eot 格 式 的 字体 (因为 排 在 最 前 )， 而 woff 格 式 字 体 从 IE9 开 始 就 支 
持 了 ， 浏 览 器 好 的 特性 都 没 用 上 啊 ! 但 是 ， 我 们 又 不 能 简单 地 把 woff 格 
式 提 前 ， 和 否则 会 影响 低 版 本 下 浏览 器 的 字体 显示 。 怎 么 办 呢 ? 有 一 个 小 
技巧 如 下 : 





@font-face { 
font-family: ICON; 
src: url('icon.eot') format('eot'); 
src: local('®'), 
url('icon.woff2') format("woff2") 
url('icon.woff') format("woff"), 
url('icon.ttf') format("typetrue"); 


D 


由 于 了 正 6 一 正 8 不 认识 功能 符 ， 于 是 下 面 一 个 src 被 完美 避 开 了 。 此 
时 ，IE9 浏 览 器 就 可 以 正大 光明 地 享用 woff 字 体格 式 了 ! 


接 下 来 解答 #iefix 有 什么 用 的 问题 。 实 际 上 ，#efix 是 没什么 用 
的 !“ 你 在 开玩笑 吗 ? * 没 有， 这 里 的 #iefix 确 实 没什么 用 ， 真 正 有 用 的 
其 实 是 前 面 的 问号 。 就 跟 变 魔 术 一 样 ， 吸 引 我 们 眼球 的 往往 不 是 关键 所 
在 。 是 这 样 的 ，IE9 之 前 的 版 本 解析 有 一 个 严重 的 问题 ， 当 src 属 性 包含 
多 个 url() 时 ， 会 把 长 长 的 字符 当 作 一 个 地 址 解析 而 返回 464 错 误 。 因 
此 把 eot 格 式 放 在 第 一 位 ， 然 后 在 字体 文件 ur1l 地 址 后 加 上 问号 ， 这 样 
IE9 之 前 的 版 本 会 把 问号 之 后 的 内 容 当 作 ur1 的 参数 。 好 吧 ，#iefix 严 
格 来 说 还 是 有 点 儿 用 的 ， 它 可 以 让 请 求 地 址 短 一 些 ， 因 此 请 求 地 址 是 不 
包括 锚 点 标志 # 及 其 后 面 的 内 容 的 。 如 果 按 照 这 种 说 法 ， 那 岂 不 是 说 
iefix 这 几 个 字符 多 余 ? 没 错 ， 多 余 ! 不 懂 的 人 不 知道 是 干什么 用 的 ， 
懂 的 人 知道 它 是 没什么 用 的 ， 因 此 多 余 。 





下 和 面 轮 到 “为 什么 需要 两 个 src” 这 个 问题 了 。 如 果 是 原生 的 下 7 和 
下 8 浏览 器 ， 第 一 个 src 实 际 上 是 多 余 的 ， 为 什么 这 么 讲 呢 ? 之 所 以 权 放 
上 来 ， 很 大 一 部 分 原因 是 为 了 测试 工程 师 。 因 为 现在 测试 工程 师 测试 低 
版 本 的 下 浏览 器 豆 欢 使 用 兼容 模式 ， 羔 容 模 式 的 玉 和 原生 同 版 本 的 下 的 
解析 是 有 区 别 的 ， 其 中 区 别 之 一 就 是 兼容 模式 的 IE7 和 IE8 不 认识 问号 
(3) 解决 方案 ， 导 致 第 二 个 src 无 法 识别 ， 不 得 已 才 多 了 第 一 行 的 
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font-weight:normal 和 font-style:normal 是 不 是 多 余 的 ? 我 





的 回答 是 ， 如 果 你 没有 同 字 体 名 的 多 字体 设置 ， Ca 
我 在 常规 项 目 中 删 挤 这 两 行 CSS 没 有 出 现任 何 异 








最 后 的 问题 是 : format() 功 能 符 有 什么 作用 ， 可 不 可 以 省 略 ? 我 
的 回答 是 最 好 不 要 省 略 。format() 功 能 符 的 作用 是 让 浏览 器 提前 知道 
字体 的 格式 ， 以 决定 是 否 需要 加 载 这 个 字体 ， 而 不 是 加 载 完 了 之 后 再 自 
动 判 断 。 举 个 例子 ， 下 面 的 CSS 代 码 在 Chrome 浏 览 器 下 束 会 同时 加 
载 eot 和 ttf 两 种 格式 字体 : 





@font-face { 
font-family: ICON; 


src: url('icon.eot'), 
url('icon.ttf'); 





浏览 器 对 文件 格式 的 判断 不 是 基于 后 级 名 ， 下 面 这 种 写法 只 会 加 
载 ttf 这 一 种 格式 字体 ， 因 为 浏览 器 提前 知道 了 文件 格式 是 自己 无 法 识 
别 的 : 





@font-face { 
font-family: ICON; 
src: url('icon.eot') format("embedded-opentype"), 
url('icon.ttf'); 





于 是 ， 毕 合 上 面 的 全 部 知识 会 有 发现 ， 业 界 常 用 的 这 和 套 东 西 ， 其 实 可 
以 优化 成 下 面 这 样 : 





@font-face { 
font-family: ICON; 
src: url('icon.eot'); 
src: local('®'), 
url('icon.woff2') format("woff2"), 
url('icon.woff') format("woff"), 


} 


有 一 种 一 周 瘦 10 斤 的 感觉 。 
3. font-style 


在 Chrome 浏 览 器 下 ，@font face 规 则 设置 font-style:italic 可 
以 让 文字 倾斜 ， 但 是 这 并 不 是 其 作用 所 在 。 


@font face 规 则 中 的 font-style 和 font-weight 类 似 ， 都 是 用 来 
设置 对 应 字体 样式 或 字 重 下 该 使 用 什么 字体 。 因 为 有 些 字体 可 能 会 有 专 
门 的 斜体 字体 ， 注 意 这 个 斜体 字体 并 不 是 让 文字 的 形状 倾斜 ， 而 是 专门 
设计 的 倾斜 的 字体 ， 所 以 很 多 细节 会 跟 物 理 上 的 请 求 不 一 样 。 于 是 ， 我 
在 CSS 代 码 中 使 用 font-style:italic 的 时 候 ， 就 会 调用 这 个 对 应 字 
体 ， 如 下 示意 : 





@font-face { 
font-family: 'I'; 
font-style: normal; 
src: local('FZYaoti'); 


} 

@font-face { 
font-family: 'I'; 
font-style: italic; 
src: local('FZShuTi'); 

} 





由 于 专门 的 斜体 字 不 太 好 找 ， 所 以 我 使 用 “方正 姚 体 " 和 “方正 全 
体 ” 代 蔡 做 示意 。 我 解读 一 下 上 面 的 CSS 代 码 : 制定 一 个 字体 ， 名 
叫 'I'， 当 文字 样式 正常 的 时 候 ， 衬 体 表现 使 用 “方正 姚 体 ”， 当 文字 设 
置 了 font-style:italic 的 时 候 ， 字 体 表现 为 “方正 舒 体 ”。 





好 ， 现 在 假设 有 下 面 这 样 的 CSS 和 HTML: 


.i{ 
font-family: I; 
} 


<p><i class="i"> 类 名 是 i， 标 签 是 i</i></p> 
<p><span class="i"> 类 名 是 i， 标 签 是 span</span></p> 











请 问 最 终 的 表现 会 是 怎样 的 ? 


由 于 <i> 标 签 天 然 有 font-style:italic， 因 此 理论 上 ， 上 面 一 行 
文字 表现 为 “方正 舒 体 ”"， 下 面 一 行为 “方正 姚 体 *"， 最 终结 果 如 何 呢 ? 
看 ， 完 全 符合 ， 如 图 8-23 所 示 。 


基尼 如 





米 名 是 ij 标签 是 
类 名 十 i, 标 令 十 Span 
图 8-23 @font face 中 font-style 作 用 示意 


这 下 大 家 应 该 明白 @font face 规 则 中 的 font-style 是 干什么 用 的 
J 


4. font-weight 


font-weight 和 font-style 类 似 ， 只 不 过 它 定义 了 不 同 字 重 、 使 
用 不 同 字 体 。 对 中 文 而 言 ， 这 个 要 比 font-style 适 用 性 强 很 多 。 我 举 
个 比较 有 代表 性 的 例子 演示 一 下 它 的 作用 : 版 权 字 体 “ 汉 仪 旗 黑 ” 字 重 非 
党 丰富 ， 但 是 这 个 字体 不 像 “ 思 源 黑 体 ”， 天 然 可 以 根据 font-weight 属 
性 值 加 载 对 应 的 字体 文件 ， 那 怎么 办 呢 ?” 很 简单 ， 使 用 @font face 规 

















则 重新 定义 一 下 即 可 。 例 如 ， 使 用 下 面 的 CSS 代 码 : 


@font-face { 
font-family: 'QH'; 
font-weight: 466; 
src: local('HYQihei 406S'); 


} 
@font-face { 
font-family: 'QH'; 
font-weight: 566; 
src: local('HYQihei 50S'); 
} 
@font-face { 
font-family: 'QH'; 
font-weight: 666; 
src: local('HYQihei 60S'); 
} 





解读 一 下 束 是 : 是 一 个 全 新 的 字体 ， 名 为 'QH' 。 当 字 重 font- 


weight 为 468 的 时 候 ， 使 用 “ 汉 仪 旋 黑 40S” 字 重 字 体 ， 为 568 的 时 候 ， 使 
用 “ 汉 仪 旗 黑 50S” 字 重 字 体 ， 为 666 的 时 候 ， 使 用 “ 汉 仪 旗 黑 60S” 字 重 字 
体 。 


于 是 ， 当 我 们 使 用 如 下 CSS 和 HTML 代 码 的 时 候 : 





.hy-46s， 

.hy-56s， 

.hy-66s { 
font-family: "QH ; 


.hy-46s { 
font-weight: 466; 


.hy-56s { 
font-weight: 566; 
} 
.hy-66s { 
font-weight: 666; 
} 
<ul> 
<1i class="hy-46s"> 汉 仪 旗 黑 46s</1i> 


<1i class="hy-56s"> 汉 仪 旗 黑 58s</1i> 
<1i class="hy-66s"> 汉 仪 旗 黑 69s</1i> 
</ul> 





就 可 以 看 到 文字 粗细 错落 有 致 的 效果 ， 如 图 8-24 所 示 。 


。 汉 仪 旗 黑 40s 
。 汉 仪 旗 黑 50s 
。 汉 仪 旗 黑 60s 


图 8-24 @font face 中 font-weight 作 用 示意 


如 果 用 在 网 页 开发 中 ， 必 定 会 让 我 们 的 界面 更 加 细腻 ， 设 计 更 加 精 
致 ， 视 觉 更 加 愉悦 。 然 而 ， 此 处 的 案例 是 基于 local() 功 能 符 的 ，IE8 
浏览 器 并 不 支持 ， 因 此 font -weight 原 本 作用 的 使 用 场景 受到 了 一 定 的 
限制 ， 只 能 渐进 使 用 。 但 是 ， 正 如 很 多 其 他 CSS 属 性 一 样 ， 广 泛 使 用 的 
功能 往往 并 不 是 其 设计 之 初 的 功能 ， 而 是 基于 一 些 特性 衍生 出 来 的 ， 由 
于 font-weight 文 持 100 一 900 足 足 9 个 字 重 ， 而 font-style 
仅 “ 正 ”和 “ 斜 ” 两 类 ， 因 此 ，font-weight 就 被 委 以 重任 来 实现 “响应 式 
图 标 ”， 而 IE7 和 IE8 浏 贤 器 都 是 文 持 这 个 的 。 

















所 谓 “ 啊 应 式 图 标 ”， 指 的 是 字号 较 大 时 图 标 字 体 细节 更 丰富 ， 字 号 
较 小 时 图 标 字 体 更 简单 的 啊 应 式 处 理 。 对 比 效果 如 图 8-25 所 示 。 


. 
A 


图 8-25 “响应 式 图 标 ” 效 果 示 音 


代码 示意 如 下 : 


@font-face { 
font-family: ICON; 
src: url(icon-large.eot); 
src: local("®"), 
url(icon-large.woff); 
font-weight: 766; 


} 
@font-face { 
font-family: ICON; 
src: url(icon-medium.eot); 
src: local("®"), 
url(icon-medium.woff); 
font-weight: 460; 
} 
@font-face { 
font-family: ICON; 
src: url(icon-small.eot); 
src: local("®"), 
url(icon-small .woff); 
font-weight: 166; 
} 





此 时 ， 不 同 的 font-weight 会 加 载 不 同 的 图 标 字 体 ， 然 后 就 能 根据 
具体 的 场景 细 化 我 们 的 图 标 显 示 细 节 。 假 设 有 下 面 的 CSS 设 置 : 


.Icon { 
font-family: ICON; 

} 

.icon-large { 
font-weight: 766; 
font-size: 128px; 

} 


.ijcon-medium { 
font-weight: 466; 
font-size: 64px; 


} 


.ijcon-small { 
font-weight: 166; 
font-size: 16px; 


} 





则 下 面 HTML 代 码 中 的 3 个 <i> 标 签 所 显示 的 效果 分 别 对 应 “弱化 细 市 的 
图 标 ”“ 细 节 较 丰富 图 标 " 和 “细节 最 丰富 图 标 ”: 








<i class="icon icon-small">&#x1f3a4;</i> 


<i class="icon icon-medium">&#x1f3a4;</i> 
<i class="icon icon-large">&#x1f3a4;</i> 





眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/8/5-1.php 或 者 扫 右 侧 的 
二 维 码 。 





5. unicode-range 


unicode-range 的 作用 是 可 以 让 特定 的 字符 或 者 特定 范围 的 字符 使 
用 指定 的 字体 。 例 如 , “微软 雅 黑 * 字 体 的 引号 左右 间 际 不 均 ， 方 同 不 
明 ， 实 在 是 看 着 不 舒服 ， 此 时 我 们 就 专门 指定 这 两 个 引号 使 用 其 他 字 
体 ，CSS 代 码 如 下 : 














@font-face { 
font-family: quote; 
src: local('SimSun'); 
unicode-range: U+261c，U+261d ; 


.font { 


font-family: quote, 'Microsoft Yahei'; 


} 





此 时 效果 就 会 如 图 8-26 所 示 。 
我 是 微软 雅 役 2 


| 
是 名 微 软 雅 肝 忆 


图 8-26 unicode-range 的 作用 效果 示意 





由 于 下 8 浏览 器 不 支持 unicode-range 属 性 ， 因 此 ， 这 里 仅 简 单 提 
及 ， 不 做 展开 ， 更 多 内 容 可 参考 我 写 的 博客 文 


i 


草 : http:/www.zhangxinxu.com/wordpress/?p=6063。 


8.5.2 @font face 与 字体 图 标 技术 


从 面 回 未 来 的 角度 讲 ， 字 体 图 标 拉 术 的 使 用 会 越 来 越 边缘 化 ， 因 为 
和 SVG 图 标 技术 相 比 ， 其 唯一 的 优势 束 是 兼容 一 些 老 的 下 浏览 占 。 等 再 
过 几 年 ，IE8 等 浏览 器 彻底 被 淘汰 了， 我 们 残 没有 任何 使 用 字体 图 标 技 
术 的 理由 了 。 











SVG 图 标 同 样 是 天 量 的 ， 同 样 颜色 可 控 ， 但 资源 占用 更 少 ， 加 载体 
验 更 好 ， 呈 现 效果 更 佳 ， 更 加 符合 语义 ， 我 个 人 是 非常 推 革 SVG 图 标 
的 。 





目前 ， 对 于 很 多 果 面 器 Web 项 目 ， 正 8 浏览 喜 还 是 不 能 忽视 的 ， 
此 ， 字 体 图 标 技术 依然 是 非常 值得 推荐 的 技术 选 型 ， 因 为 和 传统 的 图 厂 














图 标 相 比 ， 字 体 图 标的 尺寸 大 小 和 颜色 控制 非常 方便 ， 开 发 维护 方面 占 
用 流量 小 很 多 ， 收 益 是 非常 明显 的 。 








对 字体 图 标 ， 我 们 可 以 手工 使 用 一 些 软件 制作 ， 但 这 种 做 法 效率 非 
党 低下， 也 不 好 维护 ， 所 以 基本 上 现在 都 是 使 用 工具 来 完成 ， 如 使 用 
iconfont.cn 这 样 的 在 线 工具 ， 或 者 使 用 基于 Node.js 的 一 些 开 源 工 具 。 





根据 我 的 使 用 经 验 ， 这 些 工 具 都 会 生成 类 似 下 面 这 样 的 CSS 代 码 : 


@font-face { 
font-family: ICON; 
src: url(icon.eot); 
src: url(icon.eot?#iefix) format('embedded-opentype')， 
url(icon.eot.woff2) format('woff2'), 
url(icon.eot.woff) format('woff'); 


} 

.icon { 
font-family: ICON; 

} 

.ijcon-microphone:before { 
content: '\1f3a4' 

} 





这 里 出 现 两 个 需要 关注 的 东西 ， 一 个 是 字体 ， 忆 一 个 是 字符 ， 而 这 
两 个 东西 束 是 字体 图 标 技 术 的 本 质 所 在 。 


我 们 不 妨 先 来 粗略 了 解 一 下 字体 的 本 质 是 什么 。 所 谓 字 体 ， 本 质 上 
是 字符 集 和 图 形 的 一 种 映射 关系 。 这 么 解释 似乎 还 是 有 些 掏 口 ， 那 我 再 
换个 更 通俗 一 扣 儿 的 比方 吧 。 一 个 字体 文件 就 好 比 一 个 巨型 商品 房 ， 里 
面 有 很 多 房间 ， 每 个 房间 都 有 一 个 唯一 的 门牌 号 ， 然 后 这 些 房间 就 专门 
用 来 挂名 男 。 








这 里 的 “ 门 脾 写 ”就 是 “字符 集 ”, “房间 里 的 名 男 * 就 是 我 们 的 “字体 图 


形 ”。 举 个 例子 , “家 ”这 个 汉字 Unicode 编 码 是 5BB6， 这 个 5BB6 就 是 “ 门 
牌号 ”"， 在 中 文字 体 中 ， 这 个 “门牌 号 ”对 应 的 房间 里 面 的 画作 就 长 得 
是 “家 ”这 个 肉眼 所 见 的 字符 形状 。 也 就 是 说 ， 一 个 字符 编码 对 应 一 个 形 
状 。 








好 ， 现 在 如 果 我 们 通过 一 定 的 手段 ， 把 挂 5B8B6 这 个 “门牌 号 ”房间 里 
面 的 画作 改 成 一 个 房屋 的 形状 ， 那 吕 不 是 使 用 这 个 字体 文件 的 时 
候 , “家 ”就 不 是 “家 *”， 而 是 图 8-27 所 示 的 房子 了 呢 ? 


位 } 


图 8-27 ”房子 图 














式 


字体 图 标 技术 就 是 使 用 类 似 的 原理 实现 的 ， 即 把 通常 的 字符 映射 成 
为 妨 外 的 图 标 形 状 ， 于 是 ， 虽 然 我 们 眼睛 看 到 的 是 个 图 标 ， 但 是 实际 上 
它 本 质 上 残 是 一 个 普通 的 字符 。 





回 到 我 们 上 面 的 示意 代码 : 


.Icon { 
font-family: ICON 
} 


.ijcon-microphone:before { 
content: '\1f3a4' 
} 











这 里 ，1f3a4 就 是 一 个 唯一 的 “门牌 号”， 在 通常 的 字体 下 ， 其 字符 展示 
的 是 一 个 斜 的 麦克 风 ， 如 图 8-28 所 示 。 但 是 ， 在 ICON 这 个 字体 
中 ，1f3a4 的 图 形 被 映射 成 了 一 个 正 立 的 麦克 风 图 形 ， 最 后 的 显示 如 图 


8-29 所 示 这 般 。 


分 


Cau) 








图 8-28 ”原来 的 倾斜 麦克 风 图 形 


四 


图 8-29 上 自 定义 字体 下 正 立 的 麦 元 风 疼 形 














知道 了 字体 图 标 撤 术 的 原理 ， 我 们 就 能 很 好 地 理解 一 些 泻 染 现象 
了 。 


(1) 因为 原始 字符 和 最 终 的 图 形 表现 相差 很 大 ， 所 以 当 我 们 的 字 
体 文 件 加 载 缓 慢 的 时 候 ， 可 以 明显 看 到 字符 变 图 形 的 过 程 ， 这 种 加 载体 
验 是 不 太 友 好 的 ， 字 体内 联 在 CSS 文 件 中 可 以 有 效 避 免 这 一 问题 ， 但 往 
往 字 体 文件 体积 都 比较 大 ， 这 样 处 理 得 不 傍 失 。 据 我 所 知 ， 除 此 之 外 并 
没有 非常 好 的 解决 方法 。 





(2) 原始 的 字符 x-height 和 最 终 的 图 形 x-height 往 往 是 不 一 样 
的 ， 这 会 影响 内 联 元 素 的 垂直 对 齐 ， 因 此 很 容易 出 现 页 面 高 度 闪 动情 
况 ， 这 种 加 载体 验 也 是 不 友好 的 。 





(3) 原始 字符 的 ch 宽度 ， 也 就 是 水 平 占据 的 宽度 和 最 终 的 图 形 也 
古 不 一 样 的 ， 因 此 很 容易 出 现 内 联 元 素 水 平方 癌 叶 动 的 问题 ， 这 种 加 载 
体验 也 是 不 友好 的 ， 为 此 图 标 束 需 要 设 定 具 体 宽度 值 ， 例 如 : 


.Icon { 
display: inline-block; 








width: 26px; 

text-align: center; 

font-family: ICON; 
} 








当然 也 能 很 好 地 享用 字符 的 一 些 特 性 ， 如 用 font-size 改 变 尺寸 ， 
用 color 改 变 颜色 ， 用 text-shadow 增 加 阴影 ， 以 及 用 writing-mode 
实现 低 版 本 下 浏览 器 下 的 旋转 效果 ， 等 等 。 





当 我 们 使 用 工具 生成 图 标 字体 的 时 候 ， 无 论 是 在 线 工 具 还 是 本 地 工 
具 ， 其 中 间 的 媒介 都 是 SVG 图 标 ， 但 是 并 不 是 所 有 的 SVG 图 标 都 是 可 以 
的 ， 根 据 我 的 经 验 ， 最 好 满足 下 面 3 点 。 











(1) 纯 路 径 ， 纯 矢量 ， 不 要 有 base64 内 联 图 形 。 


(2) 使 用 填充 而 非 描 边 ， 也 尽量 避免 使 用 一 些 高 级 的 路 径 填 充 顽 
诲 技巧。 


(3) 宽 高 太 寸 最 好 都 大 于 2686， 因 为 字体 生成 的 时 候 ， 坐 标 值 会 四 
舍 五 入 ，SVG 尺 寸 过 小 会 导致 坐标 取 值 偏 莽 较 大 ， 使 最 终 的 图 标 不 够 精 
致 。 








有 人 可 能 会 问 : 我 可 不 可 以 把 映射 字符 直接 写 在 页 面 中 ， 而 不 是 放 
在 :before 伪 元 系 中 ?也 就 是 不 需要 下 面 的 CSS 代 码 : 








.ijcon-microphone:before { 
content: '\1f3a4' 


而 是 直接 用 : 
<i class="icon">&#x1f3a4;</i> 





从 技术 实现 的 角度 来 讲 这 是 完全 可 以 的 ， 而 且 不 支持 伪 元 素 的 IE7 
等 浏览 器 都 支持 这 样 做 。 但 是 在 实际 开发 的 时 候 ， 我 并 不 建议 这 么 做 ， 
有 两 点 原因 : 一 是 不 好 维护 ， 如 果 以 后 字符 映射 关系 改变 ， 而 图 标 
HITML 是 散布 在 各 个 页 面 中 的 ， 那 么 我 们 的 改动 就 会 很 麻烦 ;二 是 从 语 
义 角 度 考虑 ， 图 标 字 符 往 往 是 不 包含 任何 意义 的 ， 应 该 没有 必要 让 搜索 
引擎 知道 ， 也 无 须 让 辅助 设备 读 取 ， 而 伪 元 素 恰 好 有 这 样 的 功能 ， 如 果 
内 联 在 HIML 中 ， 则 反而 成 了 一 种 干扰 。 











8.6 ”文本 的 控制 


CSS 有 很 多 属性 专门 用 来 对 文本 进行 控制 ， 由 于 这 些 属性 的 作用 机 
制 往 往 是 基于 内 联 盒 模型 的 ， 因 此 对 于 内 联 块 状元 系 同 样 也 是 有 效果 
的 ， 这 就 使 得 这 些 CSS 属 性 作用 范围 更 广 了， 甚至 可 以 影响 布局 。 


8.6.1 text-indent 与 内 联 元 素 缩 进 


顾名思义 ，text-indent 就 是 对 文本 进行 缩 进 控制 ， 其 设计 之 初 的 
作用 应 该 是 实现 类 似 图 8-30 所 示 的 缩 进 效 宁 。 





依 进 
We 在 学 识 方 面 ， 没 有 人 能 胜 过 苟 寒食 ， 能 让 他 佩 
服 的 人 也 很 少 ， 今夜 ， 陈 长 生 做 到 了 这 一 点 。 
斋 进 ” ”他 看 着 苟 寒食 说 道 : “不 敢当 。" 
他 想起 惊 才 绝 艳 的 大 师兄 ， 想 到 这 场 婚事 ， 竟 
发 现 悄 无 声息 间 ， 自 己 对 师兄 的 信心 竟 有 些 动 摇 。 


图 8-30 ” 缩 进 效 果 示 意 


但 是 这 种 缩 进 对 内 容 要求 比 较 高 ， 如 果 段 落 掺 杂 现 文 、 数 字 或 者 图 
片 等 内 容 ， 缩 进 反 而 可 能 会 给 人 以 参差 不 齐 的 感觉 ， 加 上 现代 Web 形 式 
更 加 多 样 ，text-indent 在 实际 项 目 中 的 应 用 已 经 脱离 了 它 原本 的 设 
计 急 惠 。 














首先 用 得 比较 多 的 是 text-indent 负 值 隐藏 文本 内 容 。 比 方 说 ， 很 
多 网 站 的 标识 (ogo) 就 是 网 站 的 名 称 ， 从 SEO 的 角度 讲 ， 我 们 大 可 以 
使 用 <h1> 和 <h2> 这 种 级 别 的 标签 放置 我 们 的 标识 ， 同 时 写 上 对 应 的 文 





字 内 容 。 例 如 : 


<h1 class="1ogo">CSS 世 界 </h1> 


此 时 ， 我 们 就 可 以 使 用 text-indent 负 值 隐藏 这 里 的 文字 : 





.logo { 
width: 128px; 


background: url(logo.png); 
text-indent: -126px; 
} 








很 多 人 喜欢 设置 一 个 很 大 的 text-indent 负 值 ， 如 text- 
indent: -9999em， 我 是 不 建议 这 么 做 的 。 首 先 ， 这 样 做 在 某 些 设备 下 
有 潜在 的 性 能 风险 ， 体 现在 滚屏 的 时 候 会 发 生 卡 顿 ， 其次， 对 于 一 些 智 
能 设备 的 屏幕 阅读 软件 ， 如 VoiceOver， 如 果 内 容 缩 进 在 屏幕 之 外 ， 它 
是 不 会 读 取 的 ， 这 样 就 降低 了 页 面 的 无 障碍 访问 能 力 。 








另外 ，text-indent 负 值 缩 进 在 部 分 浏览 器 下 会 影响 元 素 的 


out1line 区 域 ， 通 常 需 要 再 设置 overflow:hidden。 


下 面 我 要 问 大 家 提 个 问题 : 如 果 单 看 最 终 的 CSS 样 式 效果 ， 代 码 


.logo { 
width: 128px; 
text-indent: -126px; 


width: 128px; 
text-indent: -1062%; 
} 








x 


答案 是 :不 等 同 ， 而 且 有 着 本 质 上 的 差异 。 


text-indent 的 百分比 值 是 相对 于 当前 元 素 的 “包含 块 ” 计 算 的 ， 而 
不 是 当前 元 素 。 由 于 text-indent 最 终 作 用 的 是 当前 元 素 里 的 内 联 盒 
子 ， 因 此 很 容易 让 人 误 以 为 text-indent 的 百分比 值 是 相对 于 当前 元 素 
宽度 计算 的 。 








眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/8/6-1.php 或 者 扫 下 面 的 
二 维 码 。 结 果 text-indent: -126px 缩 进 在 盒子 之 外 ， 而 text- 
indent: -166% 早 已 缩 进 到 天 涯 海 角 ， 连 影子 都 看 不 到 ， 如 图 8-31 上 所 
示 。 





图 8-31 百分比 值 缩 进 计算 示意 








因此 ， 一 些 流 传 很 广 的 text-indent 隐 藏 文本 CSS 代 码 片 段 其 实 是 
有 隐患 的 。 例 如 : 


.hide-text { 
text-indent: 1602% ; 


white-space: nowrap 
overflow: hidden; 


} 











在 正常 情况 下 ， 确 实 可 以 隐藏 文字 ， 而 且 无 论 是 一 行 还 是 多 行 都 可 以 非 
常 羔 容 地 隐藏 ， 因 为 一 般 情 况 下 “包含 块 * 的 客 度 部会 大 于 子 元 素 的 宽 
度 ， 所 以 我 们 是 看 不 出 问题 来 的 。 但 是 一 旦 “包含 块 ? 的 宽度 反而 小 了 ， 
那么 这 段 代 码 就 会 出 现 样 式 问题 。 我 举 个 简单 的 例子 : 








<div style="position:absolute;"> 


<p class="hide-text" style="position:absolute;"> 坚 挺 </py> 
</div> 

















此 时 “坚挺 ”两 个 字 绝 对 是 纹 丝 不 动 ， 绝 对 定位 具有 包 于 性 ， 而 子 元 素 也 
是 绝对 定位 的 ，hide-text 所 在 元 素 的 “包含 块 ” 的 宽度 就 是 ge， 此 时 
text-indent:166% 计 算 值 也 是 ee， 文本 缩 进 隐藏 彻底 失败 。 


关于 text-indent 的 百分比 值 ， 我 还 想 再 多 说 几 句 ， 那 承 是 text- 
indent 文 持 百 分 比值 其 实 算是 比较 “有 个 性 的 ”， 因 为 在 CSS 世 界 中 ， 与 
文本 控制 相关 的 CSS 属 性 支持 百分比 值 的 并 不 多 ， 例 如 ，letter- 
spacing、word-spacing 和 text-shadow 等 都 不 支持 。 当 然 ， 随 着 
CSS 的 发 展 ， 以 后 可 能 会 文 持 ， 例 如 ，word-spacing 新 章 案 增加 了 上 百 
分 比值 并 且 己 有 浏览 器 开始 支持 。 











那么 ，text-indent 百 分 比值 还 有 没有 实际 价值 呢 ? 从 理论 上 讲 ， 
我 们 可 以 使 用 text- indent 实 现 宽度 已 知 内 联 元 素 的 居中 效果 ， 例 
如 : 


.box { 


text-indent: 562%; 
} 
.box img { 
width: 256px; 
margin-left: -128px; 
} 





眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/8/6-2.php 或 者 扫 右 侧 的 
二 维 码 感受 一 下 居中 效果 。 








但 是 ， 由 于 text-align 属 性 的 存在 ， 这 种 居中 小 技巧 平常 使 用 的 
机 会 很 少 ， 除 非 是 text-align 不 能 设置 为 center 的 场景 。 


因此 说 来 说 去 ，text-indent 百 分 比值 就 是 一 个 扶 不 起 的 阿斗 ， 还 
是 固定 的 长 度 值 用 得 更 多 。 比 如 ， 在 标签 受 限 的 情况 下 实现 一 些 特殊 的 
布局 效果 ，CSS 和 HTML 代 码 如 下 : 








pl 
text-indent: -3em; 
padding-left: 3em; 


<p> 提 问 : 问题 内 容 .. .</p> 
<p> 回 答 : 回答 内 容 .. .</p> 
<p> 提 问 : 问题 内 容 .. .</p> 











结果 ，“ 问 题 内 容 "和 “回答 内 容 "都 会 自然 换行 对 齐 ， 如 图 8-32 所 


另外 ，text-indent 还 有 一 个 比较 生僻 的 应 用 。 在 Chrome 浏 览 器 
下 ， 如 果 <img> 标 签 没 有 设置 src 属 性 ， 则 会 出 现 一 个 灰色 的 线 框 ， 如 
图 8-33 所 示 O 
提问 : 你 是 如 何 评价 text-indent 百 分 比值 的 ? 
回答 : 我 其 实 一 并 始 是 对 text-indent 百 分 比值 抱 
有 很 大 期 望 和 的 ， 和 希望 可 以 有 一 些 非 常 屋 利 
的 应 用 ， 但 是 后 来 点 现 ， 要 么 有 缺陷 ， 要 
么 鸡肋 。 或 许 是 自己 人 掌握 的 还 不 够 吧 ! 


提问 : text-indent 有 有 什么 其 他 特性 吗 ? 


回答 : text-indent 县 有 继承 性 ， 因此， 级 别 较 高 
的 祖先 元 素 昼 用 ; 另外 ， 其 仅 对 第 一 行内 
联 元 素 有 效果 。 


图 8-32 text-align 与 纯 文 本 对 齐 布局 效果 


图 8-33 src 属性 缺失 时 候 出 现 的 边框 


根据 研究 我 发 现 ， 此 灰色 边框 是 预 留 给 alt 属 性 值 用 的 ， 是 内 联 水 
平 元 素 ， 因 此 可 以 使 用 text-indent 属 性 隐藏 之 ， 例 如 : 


img { 





text-indent: -4660pX 
overflow: hidden; 


} 


无 src 的 <img> 本 质 上 就 是 一 个 普通 元 素 ， 因 此 ， 此 时 
overflow:hidden 也 是 有 效 的 。 


最 后 再 说 几 个 你 可 能 不 知道 的 小 知识 。 
(1) text-indent 仅 对 第 一 行内 联 盒 子 内 容 有 效 。 


(2) 非 蔡 换 元 素 以 外 的 display 计 算 值 为 jnline 的 内 联 元 素 设 
置 text-indent 值 无 效 ， 如 果 计 算 值 是 inline-block/inline-table 
则 会 生效 。 因 此 ， 如 果 父 级 块 状元 素 设 置 了 text-indent 属 性 值 ， 
子 ijnline-block/inline-table 需 要 设置 text-indent:6 重 置 。 


(3) “input> 标 签 按钮 text-indent 值 无 效 。 








(4) <button> 标 签 按钮 text-indent 值 有 效 ， 但 是 存在 兼容 性 差 
异 ， 正 浏览 器 理解 为 单 标签 ， 百 分 比值 按照 容器 计算 ， 而 Chrome 和 
Firefox 浏 览 器 标签 内 还 有 其 他 Shadow DOM 元 素 ， 因 此 百分比 值 是 按照 
自身 的 尺寸 计算 的 。 





(5) <input> 和 <textarea> 输 入 框 的 text-indent 在 低 版 本 IE 浏 
史上 器 下 有 兼容 问题 。 


8.6.2 letter-spacing 与 字符 间距 


letter-spacing 可 以 用 来 控制 字符 之 间 的 间距 ， 这 里 说 的 “ 字 
符 ?” 包 括 英 文字 母 、 汉 字 以 及 空格 等 。 例 如 ; 


.lt { 
letter-spacing: .5em; 


} 


表现 束 会 这 样 宽松 : 
EE 


letter-spocing 具 有 以 下 一 些 特性 。 


(1) 继承 性 。 





(2) 默认 值 是 normal 而 不 是 86。 虽然 说 正常 情况 下 ，normal 的 计 
算 值 就 是 e， 但 两 者 还 是 有 差别 的 ， 在 有 些 场景 下 ，Jletter-spacing 
会 调整 normal 的 计算 值 以 实现 更 好 的 版 面 布局 。 








(3) 支持 负 值 ， 且 值 足够 大 的 时 候 ， 会 让 字符 形成 重 厂 ， 甚 至 反 
向 排列 〈( 非 IE 浏 览 器 ) 。 例 如 : 





.lt { 
letter-spacing: -2em; 





此 时 在 非 下 浏览 嚣 下， 下面 的 HTML 从 左 往 右 呈现 出 来 的 就 不 是 “一 二 
三 四 五 ”， 而 是 “五 四 三 二 一 ”:; 


<p class="]lt"> 一 二 三 四 五 </p> 


至 于 正 浏 览 占 ， 最 多 只 能 完全 重合 ， 无 法 有 反问 排列 。 








另外 ，1letter-spacing 负 值 仅 能 让 字符 重 登 ， 但 是 不 能 让 蔡 换 元 
素 或 者 inLline-block/ inline-table 元 素 发 生 重 羞 。 


(4) 和 text-indent 属 性 一 样 ， 无 论 值 多 大 或 多 小 ， 第 一 行 一 定 
会 保留 至 少 一 个 字符 。1letter-spacing 还 有 一 个 非常 有 意思 的 特性 就 
是 ， 在 默认 的 左 对 齐 情况 下 ， 无 论 值 如 何 设置 ， 第 一 个 字符 的 位 置 一 定 
是 纹 丝 不 动 的 。 








(5) 支持 小 数值 ， 即 使 69.1px 也 是 支持 的 ， 但 并 不 总 能 看 到 效 
果 ， 这 与 屏幕 的 密度 有 关 。 对 普通 的 保 面 显示 器 ， 设 备 像素 比 是 1， 最 
小 演 染 单位 是 1px， 因 此 ， 需 要 人 至少 连续 10 个 字符 ， 才 能 看 到 6.1px 产 
生 的 1px 间 距 变 化 ， 如 果 是 9 个 字符 ， 则 不 会 有 效果 ， 这 很 可 能 会 让 人 误 
以 为 letter-spacing 不 支持 非常 小 的 数值 ， 实 际 上 是 支持 的 。 





(6) 暂 不 文 持 百 分 比值 。 


在 实际 开发 的 时 候 ，letter-spacing 除 了 控制 文字 内 容 排版 外 ， 
还 可 以 修复 一 些 布 局 上 的 问题 。 例 如 ， 清 除 in1ine-block 列 表 由 于 换 
行 符 或 者 空格 产生 的 空白 间 附 ， 使 我 们 的 布局 控制 更 精准 : 





.box { 

letter-spacing: -1lem; 
} 
.list { 


letter-spacing: ©@; 
} 





此 处 -1em 换 成 -166em 也 是 可 以 的 。 正 如 上 面 提 到 的 ，letter- 
spacing 的 值 再 小 也 不 会 让 inline-block 列 表 发 生 重 钱 。 由 于 
letter-spacing 具 有 继承 性 ， 为 了 不 影响 列表 里 面 字符 内 容 的 排版 ， 
我 们 可 以 使 用 letter-spacing:6 进 行 重 置 ， 当 然 ， 亦 可 以 使 用 默认 
值 letter-spacing:normal 重 置 。 从 理论 上 讲 ， 后 一 种 重 置 更 稳妥 一 





些 


由 于 letter-spacing 负 值 的 字体 重 半 特性， 我 们 还 可 以 利用 该 属 
性 实现 一 些 文本 动 效 ， 核 心 CSS 代 码 如 下 : 


.title { 

animation: textIn 1s both; 
} 
@keyframes textIn { 

e% { 


letter-spacing: -268px; 


166% { 
letter-spacing: 6; 
} 
} 





这 样 束 可 以 有 文字 依次 飞 入 的 效果 了 ， 如 图 8-34 所 示 。 


需要 注意 的 是 ， 由 于 IE 浏 览 器 的 letter-spacing 负 值 不 会 有 反 向 
排列 效果 ， 因 此 ， 此 技术 目前 只 适合 移动 端 这 类 无 须 关 心 下 浏览 占 的 项 
目 。 


如 果 想 亲自 感受 效果 ， 手 动 输入 http:/demo.cssworld.cn/8/6-4.php 或 
者 扫 右 侧 的 二 维 码 。 











8.6.3 word-spacing 与 单词 间距 


word-spacing 和 1letter-spacing 名 称 类 似 ， 其 特性 也 有 很 多 共 
通 之 处 : 


(1) 都 具有 继承 性 。 





(2) 默认 值 都 是 normal 而 不 是 6。 通 常情 况 下 ， 两 者 表现 并 无 差 


已 
并。 


(3) 都 文 持 负 值 ， 都 可 以 让 字符 重 登 ， 但 是 对 于 inline-block 和 
inline-table 元 素 却 存在 兼容 性 差异 ，Chrome 浏 览 器 下 可 以 重 登 ， 正 
和 Firefox 浏 览 右 下 则 再 大 的 负 值 也 不 会 重 登 ， 因 此 不 适合 使 用 word- 
spacing 来 清除 空白 间 隐 。 








(4) 都 支持 小 数值 ， 如 word-spacing:8.5px。 


(5) 在 目前 的 CSS2.1 规 范 中 ， 并 不 支持 百分比 值 ， 但 新 的 草案 中 
新 增 了 对 百 分 值 的 文 持 ， 是 根据 相对 于 字符 的 “ 步 进 宽度 ”(advance 
width) 计算 的 。 这 属于 新 世界 内 容 ， 本 书 不 做 介绍 。 








(6) 间隔 算法 都 会 受到 text-align:justify 两 端 对 齐 的 影响 。 


当然 也 有 差异 。letter-spacing 作 用 于 所 有 字符 ， 但 word- 
spacing 仅 作用 于 空格 字符 。 注 意 ， 是 作用 在 “空格 ”上 ， 而 不 是 字面 意 
义 上 的 “单词 >。 例 如 ， 假 设 有 以 下 CSS 和 HTML: 





.WP { 
word-spacing: 26pX; 


} 


<p class="wp"> 我 love 前 端 ! </p> 











love 虽 然 是 一 个 单词 ， 但 没有 空格 ， 那 么 很 抱歉 ，word-spacing 无 
效 。 


换 句 话说 ，word-spacing 的 作用 就 是 增加 空格 的 间 际 宽度 。 有 空 
格 就 有 效 ， 可 以 是 Space 键 敲 出 来 的 空格 (Ut+68628) ， 也 可 以 是 换行 符 
产生 的 空格 (浏览 器 解析 为 U+686286) ， 还 可 以 是 Tab 键 敲 出 来 的 空格 
CU+6669) ， 抑 或 是 &npsp; 非 换行 空格 CU+66A6) 。 例 如 : 








<p class="wp"> 我 有 空 格 ， 我 .….</p> 


此 时 , “ 空 ? 和 * 格 ?两 个 字 中 间 的 间隙 就 是 原本 的 空格 宽度 +word- 
spacing 设 置 的 28px， 如 图 8-35 所 示 ， 但 不 包括 零 宽 空格 
CU+266B、U+266C、U+266D) 、 固 宽 空 格 〈 全 角 U+36686、U+2663， 
半角 U+26686、U+2662) 以 及 窗 空 格 CU+ 2669) 。 





我 有 宇 格 ， 我 a ene 


图 8-35 word-spacing 作 用 效果 示意 





另外 ， 在 命名 上 ，word-spacing 之 所 以 称 为 word-spacing 而 不 
是 blank-spacing 之 类 的 ， 主 要 原因 是 此 属性 当初 主要 为 英文 类 排版 设 
计 ， 而 英文 单词 和 单词 之 间 是 以 空格 分 隔 的 ， 要 想 控 制 单词 之 间 的 间 
距 ， 自 然 就 癌 “ 空 格 * 开 刀 了 。 














word-spacing 作 用 于 空格 的 特性 可 以 让 我 们 使 用 一 些 简单 的 方式 
进行 一 些 布局 控制 。 例 如 ， 弹 框 底 部 有 时 候 是 一 个 “确认 ”按钮 ， 有 时 
候 “ 确 认 ” 和 “取消 ”按钮 同时 存在 ， 而 且 按 钮 有 时 候 居 中 对 齐 ， 有 时候 居 
右 对 齐 ， 请 问 : 如 何 设置 CSS， 让 多 按钮 的 时 候 中 间 自 动 有 合适 的 间距 
呢 ? 








如 果 按 钮 仅仅 是 大 中 对 齐 ， 我 们 可 以 写 : 


button { 
margin: 6 16px; 
} 





但 这 里 要 同时 满足 居中 对 齐 和 居 右 对 齐 ， 就 需要 采用 别 的 方法 了 。 一 种 
方法 就 是 使 用 word- spacing: 
.box { 


word-spacing: 26pX; 


} 





两 个 按钮 距离 目 动 分 开 。 在 IE6 时 代 ， 这 确实 是 个 非常 好 的 方法 ， 但 如 
今 下 面 的 做 法 可 能 要 更 合适 些 : 


button + button { 


margin-left: 26pX; 
} 


与 word-spacing 相 比 ， 这 样 做 的 优势 在 于 ， 如 果 两 个 <button> 标 签 之 
间 没 有 空格 或 者 换行 ， 样 式 依然 有 效 。 





8.6.4 了 解 word-break 和 word-wrap 的 区 别 





准确 来 讨 ， 本 节 内 容 应 该 是 “了 解 word-break:break-all 和 word- 
wrap:break- word 的 区 别 ”， 但 这 样 太 长 了 ， 所 以 标题 只 露出 了 属性 


值 。 





首先 了 解 一 下 word-break 属 性 ， 语 法 如 下 : 


word-break: normal; 


word-break: break-all; 
word-break: keep-all; 








其 中 的 几 个 关键 字 值 的 含义 基体 解释 如 下 。 


。normal: 使 用 默认 的 换行 规则 。 

。 break-all: 人 允许 任意 非 CJK (Chinese/Japanese/Korean) 文本 间 的 
单词 断 行 。 

。 keep-all: 不 允许 CJK 文 本 中 的 单词 换行 ， 只 能 在 半角 空格 或 连 字 
符 处 换行 。 非 CJK 文 本 的 行为 实际 上 和 normal 一 致 。 


break-al1 这 个 值 所 有 浏览 器 都 支持 ， 但 是 keep-al1 就 不 这 样 
了 ， 虽 然 有 一 定 的 发 展 和 进步 ， 但 目前 移动 端 还 不 适合 使 用 word- 
break:keep-all. 


另外 ，Chrome、Safari 以 及 其 他 WebKit 或 Blink 浏 览 器 还 支持 非 官 
方 标 准 的 break-word 值 ， 其 表现 就 和 word-wrap:break-word 一 样 ， 
这 个 知识 了 解 一 下 即 可 。 


现在 轮 到 另外 一 个 主角 一 一 word-wrap 登 场 了 ， 其 语法 如 下 : 


word-wrap: normal; 
word-wrap: break-word; 


其 中 的 几 个 关键 字 值 的 含义 具体 解释 如 下 。 











e。 normal: 就 是 大 家 平 稍 见得 最 多 的 正常 的 换行 规则 。 
e。 break-word: 一 行 单 词 中 实在 没有 其 他 靠 谱 的 换行 点 的 时 候 换 
1 








word-wrap 属 性 其 实 也 是 很 有 故事 的 ， es 
长 得 太 像 ， 难 免 会 让 人 记 不 住 或 搞 混 ， 于 是 在 CSS3 规 范 里 ， 这 个 属性 
的 名 称 被 修改 了 ， 叫 作 overflow-wrap。 这 个 新 属性 名 称 Se 
确 ， 也 更 容易 区 别 和 记忆 。 但 是 ， 也 就 Chrome 和 Safari 等 WebKit 或 Blink 
浏览 器 支持 这 个 新 届 性 。 因 此 ， 虽 然 换 了 个 好 看 好 用 的 新 名 字 ， 为 了 兼 
容 性 ， 目 前 还 是 乖 秒 地 使 用 word-wrap 吧 。 





下 面 回 到 重点 : word-break:break-al1 和 word-wrap:break- 
word。 首 先 ， 两 者 长 相 神 似 ， 都 有 word， 都 有 break， 位 置 都 还 一 样 ， 
一 个 有 两 个 break， 一 个 有 两 个 word; 两 者 的 功能 作用 也 类 似 ， 
这 两 个 声明 都 能 使 连续 英文 字符 换行 ， 那 么 它们 的 区 别 到 底 是 什么 ? 


那 两 者 的 区 别 是 什么 呢 ? 


用 实例 说 话 ， 手 动 输入 http://demo.cssworld.cn/8/6-5.php 或 者 扫 下 面 
的 二 维 码 。 对 比 效果 如 图 8-36 所 示 。 





word-break:break-all 


如 果 您 在 阅读 过 程 中 有 任何 疑问 或 者 发 现 表 述 不 
严 震 的 地 方 ， 欢 迎 去 官方 论坛 http://bbs.csswor 
ld.cn 进 行 反 饶 与 交流 。 


rr? 
word-wrap: break-word; 六 自 


严谨 的 地 方 ， 欢 迎 去 官方 论坛 
http://bbs.cssworld.cn 进 行 反馈 与 交流 。 


图 8-36 ”word-break:break-all 和 word-wrap:break-word 效 果 区 别 





顾名思义 ，word-break:break-all 的 作用 是 所 有 的 都 换行 ， 毫 不 
留情 ， 一 点 儿 空 隙 都 不 放 过 ， 而 word-wrap:break-word 则 带 有 怜 帜 之 
心 ， 如 果 这 一 行文 字 有 可 以 换行 的 点 ， 如 空格 或 CIK 中 文 /日 文 / 韩 
文 ) 之 类 的 ， 就 不 打 英 文 单词 或 字符 的 主意 了 ， 在 这 些 换 行 点 换行 ， 至 
于 对 不 对 齐 、 好 不 好 看 则 不 关心 ， 因 此 ， 很 容易 出 现 一 片 一 片 空白 区 域 
的 情况 。 











这 就 是 这 两 个 声明 的 区 别 所 在 。 
8.6.5 white-space 与 换行 和 空格 的 控制 
1. white-space 的 处 理 模 型 

white-space 属 性 声明 了 如 何 处 理 元 素 内 的 空白 字符 ， 这 类 空白 字 
符 包 括 Space( 空 格 ) 键 、Enter〈 回 车 ) 键 、Tab 〈 制 表 符 ) 键 产生 的 空 


日 。 因 此 ，white-space 可 以 决定 图 文 内 容 是 否 在 一 行 显示 〔( 回 车 空格 


是 否 生效 ) ， 是 人 否 显示 大 段 连续 空白 《空格 是 否 生效 ) 等 。 








其 属性 值 包括 下 面 这 些 。 





。 normal: 合并 空白 字符 和 换行 符 。 

。 pre: 空白 字符 不 合并 ， 并 且 内 容 只 在 有 换行 符 的 地 方 换行 。 

nowrap: 该 值 和 normal 一 样 会 合并 空白 字符 ， 但 不 允许 文本 环 

绕 。 

。 pre-wrap: 空白 字符 不 合并 ， 并 且 内 容 只 在 有 换行 符 的 地 方 换 
行 ， 同 时 允许 文本 环绕 。 

。 pre-line: 合并 空白 字符 ， 但 只 在 有 换行 符 的 地 方 换行 ， 允 许 文 
本 环绕 。 














从 上 面 的 解释 我 们 可 以 看 出 ，white-space 的 功能 分 3 个 维度 ， 分 
别 是 : 是 否 合 并 空白 字符 ， 是 否 合 并 换行 符 ， 以 及 文本 是 否 自动 换行 。 
于 是 我 们 就 可 以 得 到 一 个 更 加 直观 的 功能 表 ， 如 表 8-2 所 示 。 














表 8-2 white-space 不 同属 性 值 功能 示意 








属性 换行 空格 和 制 表 文本 环绕 





ee 


pre-wrap f 


不 留 环绕 
机 


如 果 合 并 空格 ， 会 让 多 个 空格 变 成 1 个 ， 也 就 是 我 们 平常 看 到 的 效 
敲 了 10 个 空 Re s 格 。 如 果 合 并 换行 ， 会 把 多 个 连 
续 换行 合并 成 1 个 ， 并 当 作 1 个 普通 空格 处 理 ， 就 是 键盘 空格 键 融 出 来 的 
那个 空格 。 如 果 文 未 环绕， 一 行文 字 内 容 直 出 容器 宽度 时 ， 会 自动 从 下 
一 行 开始 显示 。 


2 





朱 


-> 


有 两 个 属性 值 pre-wrap 和 pre-1line 是 从 IE8 开 始 支持 的 。 如 果 大 
家 前 端 观察 敏锐 ， 就 会 发 现 很 多 网 站 技术 文章 的 代码 块 显 示 区 域 常常 会 
出 现 一 个 长 长 的 水 平 滚动 条 ， 其 实 这 样 体验 一 点 儿 都 不 好 ， 那 为 何 还 要 
这 样 设置 呢 ? 


这 其 实 是 一 个 历史 遗留 问题 ， 以 前 做 网 站 是 需要 兼容 IE6 和 IE7 浏 览 
器 的 ， 而 这 两 个 浏览 器 只 支持 white-space:pre， 而 white- 
space:pre 的 文本 是 不 环绕 的 ， 也 就 是 说 源 代码 如 果 没 有 换行 的 话 ， 它 
会 一 行 显示 到 底 ， 不 得 已 只 能 弄 个 水 平 深 动 条 。 但 是 如 今 ， 显 然 设 








置 white-space:pre-wrap 显 示 代 人 码 片段 要 更 合适 些 。 
2. white-space 与 最 大 可 用 宽度 


当 white-space 设 置 为 nowrap 的 时 候 ， 元 素 的 宽度 此 时 表现 为 “最 
大 可 用 宽度 ”， 换 行 符 和 一 些 空格 全 部 合并 ， 文 本 一 行 显示 。 








在 实际 Web 开 发 的 时 候 ，white-space 的 应 用 非常 广泛 ， 下 面 举 几 
个 例子 。 


(1) “包含 块 " 尺 寸 过 小 处 理 。 绝 对 定位 以 及 inline-block 元 素 都 
具有 包 里 性 ， 当 文本 内 容 宽 度 超过 包含 块 宽度 的 时 候 ， 就 会 发 生 文本 环 
绕 现象 。 还 记 不 记得 之 前 遇 到 过 的 “一 柱 敬 天 ”的 例子 ( 见 图 8-37) ? 可 
以 对 其 使 用 white-space:nowrap 声 明 让 其 如 预期 的 那样 一 行 显示 。 


图 8-37 被 “包含 块 ”限制 的 一 柱 擎 天 效果 


(2) 单行 文字 溢出 点 点 点 效果 。text-overflow:ellipsis 文 字 
内 容 超 出 打点 效果 离 不 开 white-space:nowrap 声 明 。 


(3) 水 平 列 表 切 换 效 果 。 水 平 列 表 切 换 是 网 页 中 常见 的 交互 效 
果 ， 如 果 列 表 的 数目 是 不 固定 的 ， 使 用 white-space:nowrap 使 列表 一 
行 显示 会 是 个 非常 不 错 的 处 理 。CSS 示 意 代 人 码 如 下 : 








.box { 
width: 368px; 
position: relative; 
overflow: hidden; 


} 

.box > ul { 
position: absolute; 
white-space: nowrap; 


.box > ul > 1 { 
display: inline-block; 





使 用 white-space:nowrap 而 不 是 使 用 一 个 绝对 安全 的 固定 宽度 值 
的 好 处 在 于 没有 多 余 的 空间 浪费 ， 同 时 通过 一 行 简单 的 
box.clientwidth - box.scrollwidth 代 码 就 可 以 知道 最 大 的 深 动 宽 


J 
度 。 


关于 此 应 用 ， 我 专门 做 了 演示 页 面 ， 手 动 输入 
http://demo.cssworld.cn/ 8/6-6.php 或 者 扫 右 侧 的 二 维 码 。 





8.6.6 text-align 与 元 素 对 齐 


第 见 的 左 中 右 对 齐 没什么 好 说 的 ， 这 里 只 讲 一 下 text- 
align:justify 两 端 对 齐 。 





因为 CSS 是 母语 为 英语 的 人 发 明 的 ， 所 以 在 早期 的 时 候 ， 对 中 文 或 
其 他 东亚 语言 并 没有 考虑 得 那么 细致 ， 从 text-align:justify 的 表现 
上 就 可 以 军 见 一 班 。 例 如 ， 正 浏览 器 《至 少 到 IE11) 到 目前 为 止 使 
用 text-align:justify 都 无 法 让 中 文 两 端 对 齐 ， 而 Chrome、Firefox 和 
Safari 等 浏览 器 都 是 可 以 的 。 





就 最 终 的 演 染 表现 来 看 ，Chrome 等 浏览 器 应 该 对 文本 内 容 进行 了 
算法 区 分 ， 对 CJK 文 本 使 用 了 letter-spacing 间 隔 算法 ， 而 对 非 CJK 
文本 使 用 的 是 word-spacing 间 隔 算 法 ， 但 下 浏览 嚣 则 就 一 个 word- 
spacing 间 隔 算 法 。 于 是 就 会 出 现 明明 左右 padding 大 小 设置 一 样 ， 结 
果 右 侧 空白 明显 更 大 的 尴 粹 问题 。 例 如 : 





.COntent { 
padding: 16px 28px; 
} 


可 能 最 后 的 效果 如 图 8-38 所 示 。 


这 是 一 段 临 时 想 出 来 的 文案 ， 其 中 可 能 合 
杂 了 凡 个 美文 单词 ， 例 如 CS9， 例 如 内 


一 一 


寺 。 





图 8-38 左右 padding 设 置 大 小 一 致 实际 留 白 不 一 致 示意 





不 过 ， 好 在 正 有 一 个 私有 的 CSS 属 性 text-justify (目前 也 写 入 
规范 草案 了 ) 可 以 实现 中 文 两 端 对 齐 的 。 于 是 ， 通 过 使 用 下 面 的 CSS 代 
码 组 合 就 可 以 实现 全 部 浏览 器 都 兼容 的 中 文 两 器 对 齐 效果 ; 








.justify { 
text-align: justify; 
text-justify: inter-ideograph; 








其 中 ， 属 性 值 inter-ideograph 的 字面 意思 是 “国际 象形 文字 ”， 非 官方 
非 标 准 ， 可 以 放心 使 用 ， 不 用 担心 以 后 其 他 浏览 器 也 支持 之 后 出 现 新 旧 
演 染 不 一 致 的 问题 。 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/8/6-7.php 或 者 扫 下 面 的 
二 维 码 。 实 例 页 面 对 比 效果 如 图 8-39 所 示 。 





这 是 一 段 临 时 想 出 来 的 文案 ， 其 中 可 能 参 
杂 了 几 个 英文 单词 ， 例 如 CSS， 例如 jS 


等 


™o 


两 端 对 齐 


这 是 一 段 临时 想 出 来 的 文案 ， 其 中 可 能 参 
杂 了 几 个 英文 单词 ， 例 如 CSS， 例如 JS 
等 


™o 





图 8-39 ”下 浏览 器 的 中 文 两 端 对 齐 效 果 


text-align:justify 除 了 实现 文本 的 两 端 对 齐 ， 还 可 以 实现 容错 


性 更 强 的 两 器 对 齐 布局 效果 。 


我 们 先 从 简单 的 一 行 排列 说 起 。 例 如 ， 要 实现 如 图 8-40 所 示 的 效 
果 。 


HTML 结 构 如 下 : 


<ul class="justify"> 
<1i> 
<img src="1.jpg"> 
<p> 图 标 描述 1</p> 
</1i> 


<1i> 
<img src="1.jpg"> 
<p> 图 标 描述 2</p> 
</1i> 
</ul> 





我 们 可 以 让 <1i> 列 表 inline-block 人 化， 然后 text- 
align:justify 一 步 到 位 即 可 实现 两 端 对 齐 效 果 了 ! 例如 : 


.justify { 
text-align: justify; 


} 

.justify li { 
display: inline-block; 
text-align: center; 


} 





但 结 末 却 不 是 想象 的 那样 ， 而 是 依旧 左 侧 排 列 ， 如 图 8-41 所 示 。 为 什么 


会 这 样 呢 ? 


图 标 摘 述 2 


图 8-40 ”简单 的 单行 两 端 对 齐 布局 效果 





图 标 摘 述 1 图 标 摘 述 2 


图 8-41 设置 text-align:justify 依 然 左 对 齐 





那 是 因为 不 足 一 行 。 在 默认 设置 下 ，text-align:justify 要 想 有 
两 端 对 齐 的 效果 ， 需 要 满足 两 点 : 一 是 有 分 隔 点 ， 如 空格 ; 二 是 要 超过 
一 行 ， 此 时 非 最 后 一 行内 容 会 两 端 对 齐 。 


上 面 的 例子 满足 了 第 一 点 ，《1i> 标 签 中 间 有 换行 符 ， 在 默认 
white-space 属 性 下 会 转换 成 普通 空格 ， 但 是 并 不 满足 第 二 点 ， 内 容 并 
没有 超过 一 行 。 这 束 难 办 了 ， 我 们 的 内 容 古 固定 的 ， 不 可 能 再 加 一 个 列 
表 ， 就 没有 什么 好 方法 了 吗 ? 


UL 可 以 规定 最 后 一 行内 联 
内 容 的 排列 方式 ， 这 是 从 正 浏览 器 过 来 的 。 例 如 ; 


.justify { 


text-align-last: justify 
} 








相当 于 把 第 二 后 要 求 直 接 给 否决 了 ， 就 是 “最 后 一 行 的 对 齐 束 是 两 尊 对 
齐 ”! 





好 一 个 及 时 雨 ! 然而 可 异 ，Safari 浏 览 器 ， 包 括 Safari 10， 都 不 支 
持 ， 以 至 于 移动 端 和 吕 面 端 都 不 能 使 用 ， 其 是 踪 憾 。 


于 是 ， 我 们 只 能 寻求 更 加 极 客 一 点 的 拉 术 手段 ， 比 方 说 ， 借 助 伪 元 
素 目 动 补 一 行 。 例 如 ; 


.Justify { 
text-align: Justify 


.justify:after { 


content: ""; 
display: inline-table;  /* 也 可 以 是 inline-block */ 
width: 168%; 

} 











这 相当 于 强制 创建 一 个 “看 不 见 ” 的 元 素 ， 满 足 换 行 这 个 要 求 ， 实 现 第 一 
行 的 两 端 对 齐 效 果 。 从 效果 上 看 ， 确 实 两 端 对 齐 了 ， 然 而 ， 列 表 下 方 似 
乎 莫名 多 了 一 些 高 度 ， 如 图 8-42 所 示 。 





一 Ar 


图 标 拉 述 1 图 标的 述 2 


图 8-42 ”两 端 对 齐 ， 但 底部 有 莫名 高 度 











关于 这 个 莫名 高 度 如 何 产生 可 以 参见 4.3 节 ， 其 中 也 提供 了 修正 手 
段 ， a 一 是 容器 设置 font- size:6， 列 表 font-size 再 还 


原 ; 二 是 辅助 两 庙 对 齐 的 内 联 元 素 设置 vertical-align:top 
或 vertical-align:bottom。 例 如 : 
.justify { 


text-align: justify; 
font-size: 0; 


} 
.justify:after { 
content: ""; 
display: inline-table; 


width: 166%; 
vertical-align: bottom; 
} 
.justify li { 
display: inline-block; 
font-size: 14px; 


} 





理论 很 完美 ， 现 实 很 残酷 。 在 下 浏 览 器 下 ， 如 有 果 font-size 设 
为 9，， 其 样式 表现 就 好 像 空 格 根本 不 存在 一 样 ， 无 法 两 端 对 齐 。 是 不 是 
再 次 失望 了 ? 后 来 ， 我 经 过 尝试 发 现 ， 我 们 可 以 设置 font- 
size:.1px， 设 置 字号 0.1 像 素 ， 正 浏览 器 又 认为 空格 存在 了 ， 同 时 间 阶 
什么 的 都 没有 了 ， 美 哉 ! 然而 ，Chrome 浏 览 器 蜗 面 浏览 器 有 一 个 最 
小 12px 的 font-size 限 制 ， 设 置 字 号 0.1 像 素 等 同 于 设置 字号 12px， 此 
时 Chrome 浏 览 器 间 际 问题 义 出 现 了 ! 是 不 是 彻底 绝望 了 ? 














于 是 ， 我 不 得 已 使 用 了 下 面 这 种 比较 极 客 的 方法 进行 处 理 : 


.justify { 
text-align: justify; 


font-size: .1px; 
font-size: -Webkit-calc(opx + Opx); 
} 











于 是 ， 皆 大 欢喜 。 上 面 的 font-size 处 理 就 是 莫名 高 度 修复 的 关键 技巧 


所 在 。 


关于 上 面 的 两 端 对 齐 案例 ， 可 以 手动 输入 http://demo.cssworld.cn/8/ 
6-8.php 或 者 扫 右 侧 的 二 维 码 进行 体验 。 





另外 多 说 一 句 ， 如 果 1Line-height 设 置 的 是 固定 值 ， 如 line- 
height: 26px， 则 容器 需要 同步 设置 ine-height:6 或 者 改 为 相对 计 
算 的 值 。 





下 面 有 另外 一 个 问题 ， 就 是 我 们 的 列表 排版 不 可 能 总 是 只 有 1 行 ， 
也 不 可 能 只 有 2 列 ， 如 果 还 是 使 用 上 面 的 伪 元 素 填 充 法 ， 可 能 就 会 出 现 
图 8-43 所 示 的 布局 。 








图 标 描述 1 图 标 描述 1 图 标 摘 述 2 





图 标 描述 2 图 标 描述 1 


图 8-43 ”最 后 一 行 尴 座 地 两 端 对 齐 





这 显然 不 是 我 们 想 要 的 效果 ， 我 们 是 希望 最 后 一 个 列表 跟 在 后 面 ， 
而 不 是 跑 到 最 右边 。 遇 到 这 种 情况 ， 我 们 可 以 使 用 辅助 列表 占 位 来 实现 
想 要 的 效果 ，HTML 代 码 如 下 : 


<ul class="justify"> 
<li><img src="1.jpg"><p> 描 述 1</p></1i> 
<li><img src="2.jpg"><p> 描 述 2</p></1i> 
<li><img src="3.jpg"><p> 描 述 3</p></1i> 
<li><img src="4.jpg"><p> 描 述 4</p></1i> 
<li><img src="5.jpg"><p> 描 述 5</p></1i> 
<1i class="placeholder"></1i> 
<1i class="placeholder"></1i> 
<1i class="placeholder"></1i> 

</ul> 





最 后 3 个 类 名 为 placeholder 的 <1i> 标 签 就 是 布局 辅助 元 素 。 假 设 我 们 
列表 宽度 是 128px， 则 如 下 设置 即 可 : 


.placeholder { 
display: inline-block; 
width: 128px; 
vertical-align: bottom; 





} 


其 作用 和 使 用 伪 元 素 创 建 一 个 宽度 1686% 的 内 联 块 级 元 素 是 一 样 的 ， 也 同 
样 会 存在 有 额外 高 度 问 题 ， 处 理 方法 一 模 一 样 ， 不 再 费 述 。 了 最 后 补充 几 
后 。 


(1) 关于 占 位 标签 的 个 数 。 占 位 标签 的 个 数 和 列表 的 列 数 保持 一 
样 就 可 以 了 ，1868% 实 现 符 合 预 期 的 布局 效果 ， 多 了 浪费 ， 少 了 不 行 。 





(2) 关于 使 用 空 标签 心理 障碍 。 有 人 对 代码 有 洁 兽 ， 原 本 规整 的 
列表 最 后 加 几 个 空 标签 ， 心 里 难受 。 这 种 心理 往往 出 现在 新 人 身上 ， 本 
质 上 是 因为 关注 氮 是 代码 自身， 而 不 是 产品 、 同 事 或 公司 更 高 层面 的 东 
西 。 于 是 ， 当 产品 经 理 提 需求 时 ， 他 们 想到 的 是 我 的 代码 如 何如 何 ， 而 
不 是 产品 收益 如 何如 何 。 毕 竟 我 们 是 职场 人 ， 很 显然 ， 创 造 收 益 和 价值 
的 意识 要 远 比 代码 洁癖 心理 对 职业 生涯 发 展 帮助 更 大 。 回 到 我 们 这 里 ， 
代码 排版 确实 不 美 了 ， 但 是 功能 很 好 地 实现 了 ， 且 非常 健壮 ， 容 错 性 
强 ， 而 且 对 SEO 没 有 任何 干扰 ， 对 辅助 设备 访问 也 没有 任何 干扰 ， 百 蓉 
无 一 害 ， 有 什么 好 难受 的 呢 ! 











8.6.7 ”如 何 解 决 text-decoration 下 划 线 和 文本 重用 的 问题 


CSS 的 text-decoration:underline 可 以 给 内 联 文 本 增加 下 划 
线 ， 但 是 ， 如 果 对 细节 要 求 较 高 ， 就 会 发 现 ， 下 划 线 经 常会 和 中 文 文字 
的 下 边缘 粘连 在 一 起 〈 如 图 8-44 所 示 ) ， 英 文 的 话 甚至 直接 穿 过 ， 越 看 
越 有 心痛 的 感觉 。 





图 38-44 中 几 个 中 文字 下 边缘 正好 都 是 横 线 ， 结 果 可 以 看 到 ， 文 字 下 
边缘 和 下 划 线 基本 上 合 在 一 起 ， 分 不 清 谁 是 谁 了 ， 换 成 微软 雅 黑 字 体 则 
似乎 变本加厉 了 ， 如 图 8-45 所 示 。 


金玉 全 王 
图 8-44 ”下划线 和 文字 合 在 一 起 





图 8-45 采用 微软 雅 黑 字体 时 文字 和 下 划 线 重 侍 





有 没有 什么 办 法 让 下 划 线 不 要 靠 得 这 么 近 ， 或 者 文字 可 以 完整 、 清 
晰 地 显示 呢 ? 有 。 方 法 很 多 ， 例 如 ， 浏 览 器 支持 并 不 好 的 text- 
decoration-skip 属 性 、CSS3 box-shadow 或 者 packground-image 模 
拟 ， 甚 至 可 以 走 canvas 和 SVG 滤 镜 。 然 而 ， 这 些 看 上 去 很 历 害 的 技巧 其 
实 华而不实 。 转 一 圈 后 你 会 发 现 ， 最 好 的 处 理 方法 就 是 使 用 看 似 普通 却 
功勋 卓越 的 border 属 性 。 例 如 : 
alt 


text-decoration: none; 


border-bottom: 1px solid; 


} 





效果 如 图 8-46 所 示 。 


有 人 可 能 会 担心 : 这 里 增加 了 下 边框 ， 会 不 会 增加 高 度 、 影 响 水 平 
对 齐 呢 ? 完全 不 用 担心 ， 对 于 纯 内 联 元 素 ， 垂 直方 向 的 padding 属 性 和 
border 属 性 对 原来 的 布局 定位 等 没有 任何 影响 。 也 就 是 说 ， 就 算 
border-bottom 宽 度 设 为 .8686px， 上 下 行文 字 的 垂直 位 置 依 旧 纹 丝 不 
动 。 再 加 上 border 兼 容 性 很 好 ， 天 然 使 用 color 颜 色 作为 边框 色 ， 可 谓 
下 划 线 重合 问题 解决 办 法 的 不 二 之 选 。 另 外 ， 配 合 padding， 我 们 就 可 
以 很 有 效 地 调节 下 边框 和 文字 下 边缘 的 距离 ， 实 现 我 们 最 想 要 的 效果 。 
使 用 类 似 下 面 的 CSS 代 码 : 











at 


text-decoration: none; 


border-bottom: 1px solid; 
padding-bottom: 5px; 





效果 如 图 8-47 所 示 。 
我 是 一 段 文 字 ， 链 接地 址 出 现下 草 线 。 
图 8-46 ”下 边框 模拟 的 下 划 线 


我 是 一 段 义 字 ， 链 接地 址 出 现下 划 线 。 





图 8-47 padding border 配 合 的 下 划 线 效果 


另外 ， 使 用 porder-bottom 模 拟 下 划 线 的 时 候 ，border-color 最 
好 省 略 ， 这 样 就 会 使 用 文字 的 color 颜 色 作 为 边框 色 ， 鼠 标 hover 的 时 
候 ， 下 划 线 会 目 动 和 文字 一 起 变色 ， 效 果 如 图 8-48 所 示 。 


使 用 border-bottom 模 拟 的 男 外 一 个 好 处 就 是 ， 我 们 还 可 以 使 用 虚 
线 或 者 点 线 下 划 线 ， 如 图 8-49 所 示 。 


我 是 一 段 文字 ， 链 接地 址 出 现下 划 线 。 


图 8-48 ”border 模 拟 下 划 线 ，hover 颜 色 跟 着 变化 效果 
我 是 一 段 义 字 ， 链 接地 址 出 现下 划 线 。 


图 8-49 ” border 模拟 下 划 线 使 用 点 线 下 划 线 效果 


text-decoration 除 了 支持 下 划 线 underline， 还 支持 上 划 线 





overline 和 中 划 线 1ine-through。 其 中 ， 上 划 线 我 没有 在 实际 项 目 中 
有 使 用 过 ， 但 是 中 划 线 却 比 较 常 见 ， 用 来 表示 “删除 ” “de1> 标 签 默认 
的 text-decoration 的 属性 值 就 是 Line-through， 因 此 类 似 原价 删除 
效果 ， 如 图 8-50 所 示 。 直 接 价格 外 面 套 一 个 <de1> 标 签 即 可 ， 既 样式 天 
然 ， 又 易于 兼容 ， 没 有 任何 理由 使 用 cspan>、<em> 之 类 标签 ， 然 后 再 
额外 设置 text-decoration: line-through。 
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图 8-50 ”原价 删除 效果 





text-decoration 还 支持 同时 设置 多 个 属性 。 例 如 ， 上 划 线 和 下 
划 线 同时 出 现 : 


al 


text-decoration: underline overline; 


} 

text-decoration 是 CSS 世 界 中 为 数 不 多 文 持 多 属性 值 的 属性 ， 然 
而 在 实际 开发 中 鲜 有 出 场 的 机 会 ， 尤 其 如 今 设 计 风 格 遍 平 色 块 ， 下 划 线 
出 场 的 机 会 也 越 来 越 少 了 。 

在 CSS3 新 世界 中 ，text-decoration 还 可 以 是 波浪 下 划 线 ， 也 可 
以 指定 下 划 线 颜色 等 ， 但 也 不 知道 等 到 了 浏览 器 全 兼容 的 时 代 ，text- 
decoration 还 有 没有 出 场 的 机 会 。 


总 之 ， 感 觉 text-decoration 是 个 越 往 后 越 悲 苦 的 角色 。 





8.6.8 ”一 本 万 利 的 text-transform 字 符 大 小 写 


text-transform 也 是 为 英文 字符 设计 的 ， 要 么 全 大 写 text- 
transform:uppercase， 要 么 全 小 写 text-transform:1owercase， 


似乎 没什么 值得 挖掘 的 ， 但 有 一 些 场景 使 用 它 却 会 有 一 本 万 利 的 效果 。 
1. 场景 一 : 身份 证 输入 





我 国 的 身份 证 最 后 一 位 有 可 能 是 字母 X， 且 各 种 场合 都 是 指定 必须 
大 写 。 如 果 我 们 给 输入 里 份 证 的 <input> 输 入 框 设置 : 
input { 


text-transform: uppercase; 


} 


那么 就 算 我 们 敲 进去 的 是 小 写 x， 出 现 的 也 是 大 写 的 X 模 样 ， 世 不 其 
好 ! 





2. 场景 二 : 验证 码 输 入 





图 8-51 给 出 的 是 某 网 站 的 验证 码 。 这 个 验证 码 实 际 上 是 不 区 分 大 小 
写 的 ， 然 而 ， 当 用 户 在 输入 框 输入 小 写 内 容 的 时 候 ， 内 心 实际 上 是 悄悄 
不 安 的 : 会 不 会 区 分 大 小 写 啊 ? 以 至 于 写 验证 码 的 时 候 同 时 按 下 Shift 键 
以 保证 输入 的 字符 与 样 例 一 模 一 样 ， 我 按 了 Shift 键 好 多 年 才 发 现 不 用 区 
分 大 小 写 。 设 想 一 下 ， 如 果 这 里 有 下 面 这 样 的 设置 : 





Imf3 上 匡 F3 | 





图 8-51 ”验证 码 和 验证 码 输入 效果 





input { 
text-transform: uppercase; 


} 


用 户 悄 悄 不 安 的 小 心思 根本 融 不 会 出 现 ， 因 为 用 户 输入 小 写字 母 的 时 
候 ， 输 入 框 里 面 出 现 的 束 是 和 验证 码 一 样 的 大 写 内 容 。 


亲 目 感受 一 下 吧 ， 手 动 输入 http://demo.cssworld.cn/8/6-9.php 或 者 扫 
右 侧 的 二 维 码 。 





8.7 了 解 :first-letter/:first-1ine 伪 元 系 


8.7.1 深入 :first-letter 伪 元 素 及 其 实例 


很 多 年 前 ，Chrome 浏 览 器 和 IE9 浏 览 占 还 未 出 现 ， 那 时 候 first- 
letter 叫 伪 类 选择 费 ， 写 法 是 前 面 加 一 个 冒号 ， 如 :first-letter。 
那 时 候 的 语义 要 更 直 白 一 些 ， 选 择 第 一 个 字符 ， 然 后 设置 一 些 样式 。 后 
来 ， 伪 类 和 伪 元 素 补 划分 得 更 加 明确 和 规范 
了 ，::after、::before、::backdrop、::first- 
letter、::first-line、::selection 等 是 伪 元 
素 ，:active、:focus、:checked 等 被 称 为 伪 类 ， 这 就 导致 : :first- 
letter 的 语义 发 生 了 一 些 变化 一 一 首 字 符 作 为 元 素 的 假想 子 元 素 。 


“假想 子 元 系 ”， 听 上 去 有 些 故 弄 立 虚 的 感觉 ， 实 际 并 不 是 ， 以 这 种 
更 加 直 白 通俗 的 方式 解析 才 更 容易 理解 下 面 的 很 多 现象 。 





1. : :first-letter 伪 元 素 生 效 的 前 提 

要 想 让 : :first-letter(:first-letter) 伪 元 素 生 效 ， 是 需要 满 
足 一 定 条 件 的 ， 而 且 条 件 乍 一 看 还 挺 苛刻 。 

首先 ， 元 素 的 display 计 算 值 必须 是 block、inline- 


block、list-item、table- cell 或 者 table-caption， 其 他 所 


有 display 计 算 值 都 没有 用 ， 包 括 display:table 和 display:flex 
第 
于 o 


此 外 ， 不 是 所 有 的 字符 都 能 单独 作为 : :first-letter 伪 元 素 存在 


的 。 什 么 意思 有 呢 ? 我 们 看 一 个 简单 的 例子 ，CSS 和 HIMEL 代 码 如 下 : 


p:first-letter { color: silver; } 





按照 我 们 的 认 知 ， 第 一 个 问号 应 该 是 银色 的 ， 但 实际 上 ， 全 部 都 是 
默认 的 黑色 ， 效 果 如 图 8-52 所 示 。 


人 























图 8-52 ”问号 全 部 默认 黑色 





为 什么 呢 ? 这 是 因为 常见 的 标点 符号 、 各 类 括号 和 引号 
在 : :first-letter 伪 元 素 眼 中 全 部 都 是 “辅助 类 ”字符 ， 有 点 儿 买 东西 
送 赠品 的 感觉 ， 但 是 赠品 本 里 却 不 能 购买 ， 这 里 的 问号 “?” 束 属于 赠 
品 。 有 些 不 理解 ? 看 一 个 例子 就 知道 了 。 假 如 我 们 在 上 面 的 HTML 中 一 
堆 问 号 后 面 写 上 一 些 内 容 字 符 ， 比 方 说 中 文 “ 辅 助 * 二 字 ， 结 果 效 果 如 图 
8-53 有 所 不 。 











助 





























图 8-53 ”全 部 问号 和 “ 辅 * 字 变 成 银色 





色 ， 要 变 就 一 大 波 一 起 变 。 原 因 很 简单 , “辅助 ”二 字 才 是 : :first- 
letter 伪 元 系 真正 要 收入 夺 中 作为 “ 伪 元 素 ” 的 字符 ， 但 是 现在 前 面 出 现 
了 一 堆 它 不 感 兴趣 的 问 写 ， 怎 么 办 呢 ? 那 就 当 作 赠 品 一 并 收 了 ， 于 是 ， 
一 大 波 字 符 全 都 成 银色 了 。 如 果 全 是 问号 ， 因 为 没有 主 商品 ， 自 然 也 就 
无 法 获得 赠品 ， 所 以 : :first-letter 没 有 选择 任何 字符 ， 问 号 全 部 默 
认 是 黑色 。 








有 人 可 能 会 有 疑问 那 到 底 哪些 字符 属于 “赠品 "， 哪 些 属于 “ 商 
中" 呢 ? 我 特意 做 了 测试 ， 总 结 下 来 就 是 ，“ 赠 品 字符 ”包括 .@#%8&*() 
Co I el 0) es a Dati 











正常 情况 下 可 以 直接 作为 伪 元 素 的 字符 束 是 数字 、 英 文字 母 、 中 
文 、$、 一 些 运算 和 从， 以 及 非常 容易 被 忽视 的 空格 等 。 这 里 的 “空格 ”有 
必要 再 加 粗 强 调 一 下 ， 因 为 它 的 确 是 很 容易 被 忽视 的 一 个 字符 。 

最 后 说 明 一 点 ， 字 符 前 面 不 能 有 图 片 或 者 inline-block/inline- 
table 之 类 的 元 素 存 在 。 例 如 ， 下 面 的 HTML 和 CSS 代 码 : 


p:first-letter { color: silver; } 





<p><i style="display:inline-block"></i> 银 色 </p> 


结果 “银色 ”两 字 的 颜色 还 是 黑色 ， 如 图 8-54 所 示 。 这 就 是 因为 多 了 一 
个 display 值 是 inline-block 尺 寸 为 6 的 <i> 元 素 ， 导 致 ::first- 
letter 伪 元 素 直 接 不 起 作用 了 。 





一 般 来 讲 ，: :before 伪 元 素 和 普通 元 素 之 间 没 有 多 少 瓜葛 ， 例 
如 :first-child 和 :empty 之 类 的 选择 器 都 不 受 影 响 ， 但 是 ， 由 
于 ::first-letter 和 ::before 一 样 也 是 伪 元 素 , “上 暗 生 情 司 ” 也 是 难免 
的 。 翻 译 成 CSS 世 界 的 术语 就 是 : : :before 伪 元 素 也 参与 : :first- 
letter 伪 元 素 。 例 如 ， 如 下 CSS 和 HTML 人 代码: 





p:before { 
content: “新 闻 : '; 


p:first-letter { 
color: silver; 


} 








<p> 这 是 新 闻 的 标题 .….< /p> 








结果 “新 ” 变 成 了 银色 ， 如 图 8-55 所 示 。 包 括 下 8 在 内 的 浏览 器 都 是 这 样 的 
表现 。 


银 1 


[让 


图 8-54 inline-block 元 素 让 :first-letter 无 效 
逆 : 这 是 新 闻 的 标题 


图 8-55 :before 伪 元 素 的 首 字符 变 成 银色 效果 





2. : :first-letter 伪 元 素 可 以 生效 的 CSS 属 性 


如 果 字 符 被 选 作 了 : :first-letter 伪 元 素 ， 并 不 是 像 : :before 伪 
元 素 那样 ， 几 乎 所 有 CSS 都 有 效 ， 只 是 一 部 分 有 效 。 


。 所 有 字体 相关 属性 : font、font-style、font-variant、font- 
weight、 font-size、line-height 和 font-family。 

。 所 有 背景 相关 属性 : background-color、background- 
image、background- position、background- 
repeat、background-size 和 和 background-attachment。 

。 所 有 margin 相 关 属 性 : margin、margin-top、margin- 
right、 margin-bottom 和 lmargin-left。 

。 所 有 padding 相 关 属 性 : padding、padding-top、padding- 
right、 padding- bottom 和 padding-1left。 

。 所 有 border 相 关 属 性 : 缩写 的 border、border-style、border- 
color、border-width 和 普通 书写 的 属性 。 

。 color 属 性 。 


e text-decoration、 text-transform、letter- 
spacing、word-spacing (合适 情境 下 ) 、1ine- 
height、float 和 vertical-align (只 有 当 float 为 none 的 时 
候 ) 等 属性 。 


因此 ， LO 
藏 : :first- letter 伪 元 素 ， 还 是 省 省 吧 。 


3. ::first-letter 伪 元 素 的 一 些 有 意思 的 特点 


(1) 支持 部 分 dispLay 属 性 值 标签 仍 套 。 we 
获取 可 以 路 标签 ， 也 就 是 不 仅 能 选择 匿名 内 联 盒 季 ， 还 能 透 过 层 层 标签 
进行 选择 ， 但 是 也 有 一 些 限制 ， 并 不 是 所 有 标签 髓 套 都 是 有 用 的 。 


display 值 如 果 是 inline、block、table、table-row、table- 
caption、table- cell、1list-item 都 是 可 以 的 ， 但 是 不 能 
是 inline-block 和 inline- table， 人 否则 : :first-letter 伪 元 素 会 
直接 无 效 ;， 而 display :flex 则 改变 了 规则 ， 直 接 选 择 了 下 一 行 的 字符 
内 容 。 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/8/7-1.php 或 者 扫 右 侧 的 
二 维 码 。 





例如 : 


p:first-letter { 
color: silver:; 


} 


p > span { 
display: table; 





za 


<p><span> 第 一 个 </span> 字 符 看 看 会 不 会 变 























结果 如 图 8-56 所 示 , “第 ? 字 变 成 银色 了 《为 了 打印 对 比 明显 ， 没 有 使 用 
演示 页 面 的 红色 ) 。 


一 -一 一 一 


请 选择 display 的 属性 值 :| table "| 














图 8-56 “第 ” 变 成 银色 验证 了 tab1le 类 型 坐 套 有 效 


这 种 藤 套 关系 文 持 多 层 藤 套 ， 即 连续 套 4 一 5 层 in1ine 水 平 的 标签 
和 没有 任何 标签 误 套 的 效果 古 一 样 的 。 





(2) 颜色 等 权重 总 是 多 了 一 层 。 这 是 非常 容易 犯 的 一 个 错误 ， 也 





是 CSS 世 界 十 大 不 易 理 解 问题 之 一 。 例 如 ， 下 面 这 个 问题 是 某 同行 发 邮 
件 问 我 的 ， 我 简单 编辑 了 一 下 : 
p:first-letter { 


color: red; 


} 


p > span { 
color: blue!important; 
} 
<p><span> 第 一 个 </span> 字 符 看 看 会 不 会 变 红 ? </p> 





za 

















请 问 “ 第 "这 个 字符 的 颜色 是 什么 ? 


基本 上 ， 超 过 95% 的 前 端 人 员 会 认为 是 blue， 因 为 大 家 都 是 从 CSS 
选择 器 权重 的 角度 去 考虑 的 。 这 个 答案 本 号 没 问 题 ， 但 是 却 忽略 了 很 重 
要 的 一 点 ，: :first-letter 伪 元 系 其 实 是 作为 子 元 素 存 在 的 ， 或 者 说 
应 当 看 出 是 子 元 素 ， 于 是 就 很 好 理解 了 。 对 于 类 似 color 这 样 的 继承 属 
性 ， 子 元 素 的 CSS 设 置 一 定 比 父 元 素 的 级 别 要 高 ， 哪 怕 父 级 使 用 了 重量 
级 的 !important， 因 为 子 元 素 会 先 继承 ， 然 后 再 应 用 自 喘 设置 。 
此 ， 上 面 CSS 和 HTML 代 码 的 最 终结 果 是 ， 第 一 个 字符 “第 ” 字 的 颜色 是 
red， 红 色 ! 








这 就 是 : :first-letter 伪 元 素 的 另外 一 个 重要 特性 
重 总 是 多 了 一 层 。 


颜色 等 权 





4.， : :first-letter 实 际 应 用 举例 


电 商 产品 经 名 会 有 价格 ， 价 格 前 面 一 般 都 有 一 个 # 符 号， 这 个 符号 
字体 往往 会 比较 特殊 ， 字 号 也 比较 大 ， 同 时 和 文字 的 数值 有 几 像素 的 距 
离 。 要 实现 这 样 的 效果 ， 通 第 的 做 法 是 在 ¥ 符 写 外 面包 一 个 span 标 签 ， 





命名 一 个 类 名 ， 然 后 通过 CSS 控 制 。 实 际 上 ， 还 有 更 简单 巧妙 的 方法 ， 
就 是 使 用 本 文 介绍 的 : :first-letter 伪 元 素 。 


CSS 示 例 代 人 码 如 下 : 


.price:first-letter { 
margin-right: 5px; 


font-size: xx-large; 
vertical-align: -2px; 


} 





于 是 ， 我 们 的 HTML 就 可 以 很 简洁 : 

¥ 并 不 是 “赠品 字符 ”， 因 此 这 里 可 行 ， 最 后 效果 如 图 8-57 所 示 。 
图 8-57 ¥ 在 使 用 : :first-letter 控 制 后 的 效果 
8.7.2 ”故事 相对 较 少 的 :first-1line 伪 元 素 


:first-line 和 :first-letter 像 是 对 表 兄 第 ， 所 谓 “ 不 是 一 家 人 
不 进 一 家 门 ”，” 它 们 长 得 类 似 ， 很 多 特性 也 类 似 。 但 是 相 比 之 
下 ，:first-line 的 故事 要 少 一 些 ， 没 有 “赠品 字符 ”之 类 的 梗 存在 。 








。 :first-line 和 :first-letter 伪 元 素 一 样 ，IE9 及 以 上 版 本 浏览 
器 支持 双 冒 号: :first-line{} 写 法 ，IE8 浏 览 器 只 认识 单 冒 号 写 
读 。 

。 :first-line 和 :first-letter 伪 元 素 一 样 ， 只 能 作用 在 块 级 元 素 
上 ， 也 就 是 display 为 bljock、ijin1line-block、1ist- 








item、table-cell 或 者 table- caption 的 元 素 设置 :first- 
1ine 才 有 效 ，table、flex 之 类 都 是 无 效 的 。 

。 :first-Line 和 :first-letter 伪 元 素 一 样 ， 仅 文 持 部 分 CSS 属 
性 ， 例 如 : 

o 所 有 字体 相关 属性 ; 

o color 属 性 ; 

o。 所 有 背景 相关 属性 ; 

o text-decoration、 text-transfor、letter- 
spacing、 word-spacing、 line-height 和 vertical-align 
等 属性 。 

。 :first-line 和 :first-letter 伪 元 素 一 样 ，color 等 继承 属性 的 
权重 总 是 多 了 一 层 ， 毕 竟 称 为 “ 伪 元 素 ”， 就 好 像 里 面 还 有 个 子 元 
素 。 如 果 :first-line 和 :first- letter 同 时 设置 颜 
色 ，:first-letter 级 别 比 :first-line 高 ， 即 使 :first- line 
写 在 后 面 ， 甚 至 加 !important (如 果 浏 览 器 支持 ) 也 是 如 此 。 

。 :first-line 和 :first-letter 伪 元 素 一 样 ， 也 支持 标签 钥 套 ， 但 
是 具体 细则 和 :first-letter 出 入 较 大 ， 例 如 ， 它 不 支持 table 相 
关 属 性 等 。 








具体 大 家 可 以 亲自 感受 一 下 ， 手 动 输入 http://demo.cssworld.cn/8/7- 
2.php 或 者 扫 右 侧 的 二 维 码 。 





例如 : 


p:first-letter { 
color: silver; 
} 
p > span { 
display: inline-block; 














<p><span> 第 一 行 </span> 字 符 看 看 会 不 会 2 














结果 在 Chrome 浏 览 右 下 颜色 后 然 断 开 了 ， 如 图 8-58 所 示 。 


请 选择 display 的 属性 值 :| inline-block | 


第 一 行 


图 8-58 Chrome 浏览 器 下 ijnline-block 阳 汤 :first-line 


IE 和 Firefox 都 没有 这 个 问题 ， 文 字 颜 色 都 是 一 样 的 。 因 此 ， 如 果 想 
使 用 :first-line， 首 行内 容 不 能 混入 inline-block/inline-table 
元 素 。 


: :first-line 实 际 应 用 举例 


下 面 就 举 一 个 我 在 茶 千 万 级 访问 项 目 中 使 用 : :first-1line 的 例子 
吧 。 大 致 是 这 样 的 : 我 希望 网 站 小 标签 、 线 框 按 钮 和 实 色 按 钮 全 部 都 可 
以 使 用 color 颜 色 控制 ， 例 如 : 


<a href class="btn-normal red" role="button"> 红 色 按 钮 </ay> 





<a href class="btn-normal blue"” role="button"> 蓝 色 按 钮 </ay> 
<a _ href class="btn-normal green"” role="button" > 绿色 按钮 </ay> 





其 中 ，.red、.blue、.green 是 站 点 通用 的 颜色 类 名 。 结 果 我 就 遇 到 
了 难题 ， 当 我 们 使 用 如 下 CSS 代 码 的 时 候 ， 实 色 背 景 按 钮 就 会 遇 到 文字 
颜色 和 背景 颜色 一 样 的 问题 : 

.btn-normal { 


background-color: currentColor; 


} 


因为 变量 currentColor 就 是 当前 color 的 色 值 。 怎 么 办 呢 ? 考虑 到 按 
钮 上 的 文字 都 是 白色 ， 因 此 我 们 可 以 这 样 处 理 : 


.btn-normal: :first-line { 
color: #fff; 





} 


因为 利用 了 ::first-1line 伪 元 素 ， 于 是 .btn-normal 标 签 上 的 大 
色 实 际 上 是 设置 给 background-color 的 ， 而 按钮 真正 呈现 的 颜色 已 经 
被 ::first-1ine 伪 元 素 牢 牢 设 置 好 了 ， 就 完全 不 用 担心 文字 颜色 和 背 
景色 混在 一 起 了 。 


大 功 告 成 ! 此 时 ， 如 果 要 新 增 一 个 黑色 按钮 ， 直 接 用 下 面 的 HTML 
代码 就 可 以 了 ， 无 须 额 外 再 去 写 按 钮 相关 的 CSS 代 码 : 








<a href class="btn-normal black" role="button" > 绿色 按钮 </ay> 





第 9 草 ”元 素 的 装饰 与 类 化 


前 面 几 音 介 绍 了 与 CSS 世 界 布局 相关 的 内 容 ， 如 果 用 建筑 打 比 方 ， 
就 是 毛坯 房 已 经 建 好 了 ， 理 论 上 可 以 入 住 了 ， 但 实际 上 ， 我 们 或 多 或 少 
都 会 对 房间 进行 一 定 的 装修 ， 这 个 “装修 ?反映 在 CSS 世 界 中 就 是 “元 系 的 
装饰 和 美化 ”， 如 设置 合适 的 颜色 或 者 增加 合适 的 底 纹 等 。 





9.1 _ CSS 世界 的 color 很 单调 


9.1.1 少 得 可 怜 的 颜色 关键 字 


这 里 的 “颜色 关键 字 ? 指 的 是 诸如 red、b1lue 这 些 关 键 字 。 





CSS1 的 时 候 只 支持 16 个 基本 颜色 关键 字 ， 如 black、white。 为 什 
么 数量 这 么 少 呢 ? 我 们 可 以 想 想 当时 的 显示 器 水 平 ， 不 是 黑白 的 已 经 不 
= 





CSS2 的 时 候 ， 显 然 应 该 要 新 增 一 些 颜 色 关 键 字 。 或 许 很 多 人 满怀 
希望 ， 总 以 为 会 有 什么 尺 喜 ， 结 果 果 然 很 惊喜 : 居然 只 加 入 了 一 个 颜色 
橙色 orange。 








到 了 CSS3 的 时 候 ， 以 为 又 会 是 “ 雷 声 大 ， 雨 点 小 *， 结 果 这 次 却 出 人 
意料 ， 一 下 子 增加 了 100 多 个 颜色 关键 字 ， 甚 至 连 mediumturquoise 这 
样 的 复杂 得 看 不 懂 也 记 不 住 的 关键 字 都 出 现 了 。 这 些 扩展 的 CSS 颜 色 关 
键 字 是 有 专门 的 名 称 的 ， 称 为 *X11 颜 色 名 ”， 这 里 的 “X11? 不 是 11 区 的 
意思 ， 而 是 指 用 来 显示 位 图 的 X Window System， 常 见于 类 UNIX 计 算 机 
系统 上 。 








到 了 CSS4 的 时 候 ， 以 为 又 会 有 什么 怀 人 之 举 ， 结 果 又 仅 增加 了 一 
个 颜色 关键 字 一 -rebeccapurple。 


在 本 书 中 ，CSS 世 界 指 CSS 2.1，CSS 新 世界 指 CSS3，CSS 新 新 世界 
指 CSS4， 因 此 ，CSS 志 界 中 支持 的 颜色 关键 字 其 实 少 得 可 怜 ， 总 共 就 17 
个 ， 如 图 9-1 所 示 。 其 中 ，gray 和 grey 表 示 的 是 同一 个 颜色 值 。 如 果 想 








了 解 更 多 CSS3 颜 色 关键 字 ， 可 以 阅读 这 篇 文章 :; http:/www. 


zhangxinxu.com/wordpress/?p=4859。 


所 有 CSS3 新 增 的 颜色 关键 字 原 生 IE8 浏 览 器 都 是 不 支持 的 。 注 意 ， 

这 里 特意 加 了 “原生 ”二 字 。 我 们 总 是 使 用 下 兼容 模式 去 测试 低 版 本 正 浏 
览 器 ， 但 不 总 是 准确 的 ， 其 中 之 一 就 是 颜色 。 如 果 你 用 高 版 本 下 浏览 器 
的 IE8 模 式 去 浏览 ， 会 发 现 CSS3 的 颜色 值 都 是 可 以 准确 泻 染 的 ， 但 实际 
上 ， 原 生 正 8 都 不 认识 ， 而 使 用 正 8 的 用 户 几 乎 全 部 都 是 原生 下 8， 因 此 
要 慎 用 。 不 过 ， 考 虑 到 实际 开发 的 时 候 设 计 师 不 可 能 就 使 用 这 些 关键 字 
对 应 的 颜色 ， 因 此 ， 我 们 没 多 少 机 会 使 用 颜色 关键 字 ， 也 自然 很 难 有 机 
会 躁 到 这 个 坑 。 











规范 颜色 ”关键 字 RGB hex 值 《实时 表现 
00 | 
silver 井 CBceBce 
| gray [] | #888680 于 
white | #fffffFf 
rn 00000 | 加 时 时 
BE  -: #ff0000 。 
pr 00050 | 十 
Re 国 fcnsia tfocrf 
rn :005000 | 时 是 
BB line t+ooffog ”国光 
olive #305000 十 
yellow | #ffffee 站 
|  ":， :000050 。 
| 2 :00007f 。 
teal :003650 。 
us #00ffff BO 
CSS Level 2 (Revision 1) l= orange #ffa500 Ws 


图 9-1 CSS 世界 支持 的 颜色 关键 字 











事情 还 没有 结束 ， 接 下 来 ， 关 于 磊 色 名 称 ， 还 有 一 个 很 有 意思 但 很 


多 人 都 不 知道 的 特性 表现 ， 那 就 是 : 如 果 浏 览 器 无 法 识别 颜色 关键 字 ， 
那么 HTML 中 对 颜色 关键 字 的 解析 和 CSS 中 的 会 不 一 样 。 





这 里 有 必要 好 好 解释 一 下 。 大 家 应 该 都 知道 ， 传 统 HTML 的 部 分 属 
性 可 以 直接 支持 color 属 性 ， 例 如 : 


同时 ， 我 们 也 可 以 通过 style 属 性 书写 color 声 明 。 例 如 : 


<font style="color:pink;"> 少 女 色 </font> 


如 果 浏 览 器 认识 这 些 颜 色 关 键 字 ， 则 该 什么 颜色 就 显示 什么 颜色 ; 
但 是 ， 如 果 浏 览 器 无 法 识别 这 些 颜色 关键 字 ， 则 两 种 书写 的 最 终 表现 会 
有 差异 。 





在 HIML 中 ， 会 使 用 其 他 算法 将 非 识 别 颜 色 关 键 字 转 换 成 丸 外 一 个 
完全 不 同 的 颜色 值 ; 而 在 CSS 中 则 是 直接 使 用 默认 颜色 值 。 


例如 ， 我 们 使 用 CSS4 水 平 的 颜色 关键 字 rebeccapurp1le 做 测试 ， 
HTML 代 码 如 下 : 


<h1 style="color:rebeccapurple;">CSS 色 和 <font color="rebeccapurple">HTML 色 
</font> 





解析 差异 测试 </h1> 


IE9 浏 览 占 下 的 结果 如 图 9-2 所 示 。 


CSS 色 和 HTMNUL 色 解析 差异 测试 


图 9-2 IE9 浏 览 器 下 “HTML 色 ”显示 为 绿色 


IE11 浏 览 喜 下 的 结果 则 如 图 9-3 所 示 。 


CSS 色 和 HTMEL 色 解析 差异 测试 


图 9-3 IE11 浏 览 器 下 所 有 文字 都 是 偏 紫 色 的 





9.1.2 不 支持 的 transparent 关 键 字 





transparent 关 键 字 是 一 个 很 有 意思 的 关键 字 ，background- 
color:transparent 包 括 IE6 浏 览 器 都 支持 ，border- 
color:transparent 从 IE7 浏 览 器 开始 支持 ， 但 是 color: 
transparent 却 从 IE9 浏 览 器 才 开 始 支持 。 


我 确定 color :transparent 原 生 下 8 浏览 器 不 支持 ， 会 使 用 默认 颜 
色 代 蔡 。 不 要 拿 兼 容 模 式 下 的 测试 结果 说 事 儿 ， 那 是 不 准 的 。 高 版 本 I 下 
浏览 器 下 的 IE8 兼 容 模式 Color: transparent 确 实 可 以 让 文字 透明 ， 
但 是 下 8 用 户 都 是 使 用 原生 IE8 的 。 


9.1.3 不 支持 的 currentColor 变 量 





currentColor 变 量 是 个 好 东西 ， 可 以 使 用 当前 color 计 算 值 ， 即 
所 谓 颜 色 值 。 但 是 同样 地 ，IE9+ 浏 览 器 才 支 持 它 。 


实际 上 ，CSS 中 很 多 属性 值 默 认 就 是 currentColor 的 表现 ， 我 们 
一 般 〈 除 了 部 分 浏览 器 animation 需 要 ) 无 须 画 屿 添 足 地 再 声明 这 个 天 
键 字 。 如 border、text-shadow、box-shadow 等 ， 尤 其 porder， 包 括 
IE7 在 内 的 浏览 器 都 是 如 此 特性 。 因 为 我 们 使 用 图 形 生 成 的 时 候 ， 尽 量 
使 用 border 属 性 ， 所 以 hover 变 色 只 需要 控制 color 值 就 可 以 了 。 例 
如 : 











.test { 
color: red; 


border: 2px solid; 


} 





没有 必要 这 么 使 用 ; 


.test { 
color: red; 


border: 2px solid currentColor; 


} 





9.1.4 不 支持 的 rgba 颜 色 和 hs1a 颜 色 


CSS 世 界 的 color 属 性 文 持 十 六 进 制 颜色 、rgb 颜 色 。 十 六 进 制 颜色 
指 的 是 长 得 像 #@86666 或 #866 这 样 的 颜色 ， 我 们 在 CSS 中 用 得 最 频繁 的 
就 是 这 种 格式 的 颜色 。 为 什么 昵 ? 因为 字符 数目 最 少 ， 书 写 更 快 ， 洽 染 
性 能 更 高 。 


rgb 颜色 实际 上 和 十 六 进 制 颜 色 是 近 杀 ， 都 归属 于 rgb 颜色 ， 只 是 
进 制 有 差异 。rgb 格 式 从 我 入 行 起 浏览 器 就 支持 了 ， 除 了 支持 数值 颜 
色 ， 如 rgb(255，6，51)， 还 支持 百分比 rgb 颜色 ， 如 rgb(166%，68%， 
26%) ， 这 个 很 多 人 应 该 是 不 知道 的 。 





rgb 数值 格式 只 能 是 整数 ， 不 能 是 小 数 ， 人 否则 ， 包 括 各 下 以 及 
Chrome 在 内 的 浏览 器 都 会 无 视 它 。 下 面 是 一 些 文 持 和 不 文 持 rgb 数值 格 
式 的 示例 ; 








/* 下 面 这 些 都 是 同一 个 RGB 颜色 : */ 














#f03 
#F@3 
#ff0033 
#FF80633 


rgb(255,6,51) 

rgb(255, 6, 51) 

rgb(255，6，51.2) /* 无 效 ! 整数 ， 不 能 小 数 */ 
rgb(166% ,6%,26%) 

rgb(166%，6%，26%) 





rgb(166%，6，26%) /* 无 效 ! 整数 和 百分比 不 能 在 一 起 使 用 */ 








但 color 属 性 并 不 支持 hs1 颜 色 、rgba 颜 色 和 hs1a 颜 色 。 


hs1 颜 色 是 CSS3 才 出 现 的 颜色 表现 格式 ，IE9+ 浏 览 器 才 文 持 。 和 

ss green、blue 一 样 ，hs1 颜 色 的 3 个 字母 也 有 自己 的 含 
其 中 ，h 表 示 hue， 是 色调 的 意思 ， 取 值 8e 一 366， 大 致 按照 数值 红 、 

、 黄 、 绿 、 青 、 蓝 、 紫 变化 节 泰 ; s 表 示 saturation (饱和 度 ) ， 用 0 一 
i 值 越 大 饱和 度 越 高 ， 颜 色 越 亮 ， 通 常 我 们 评价 某 设计 “ 亮 瞎 
我 们 的 眼 ?， 就 是 “这 个 设计 颜色 饱和 度 太 高 ”的 另 一 种 说 法 ;1 表示 
lightness《〈 亮 度 ) ， 也 用 8 一 166% 表 示 ， 值 越 高 颜色 越 亮 ，1009% 就 是 白 
色 ，50% 则 是 正常 亮度 ，0% 就 是 黑色 。 














在 取 色 器 中 ，hs1 颜 色 非 常 管用 ， 有 助 于 迅速 选取 我 们 想 要 的 颜色 
值 ， 或 者 根据 现 有 颜色 得 到 近似 色 。 比 方 说 ， 我 们 要 实现 一 个 hover 效 
果 ，hover 一 个 色 块 ， 然 后 颜色 加 深 ， 怎 么 实现 呢 ? 使 用 rgb 很 不 方便 ， 
而 使 用 hs1 则 很 简单 ， 我 们 只 要 把 1《〈 也 就 是 亮度 ) 稍微 调 低 一 点 儿 就 可 
以 了 。 





最 后 ，CSS3 中 的 颜色 支持 Alpha 透 明 通 道 ， 于 是 就 有 了 rgba 颜 色 和 
hs1a 颜 色 ，a 表 示 透 明度 ， 取 值 在 6 一 1，68 表 示 完 全 透明 ，1 表 示 实 色 无 
透明 。 如 果 使 用 小 数 ， 前 面 的 6 可 以 省 略 ， 能 节约 一 个 字符 大 小 。 


rgba(255,0,0,.7) 
hs1a(246,166%,56%，.7) 


更 深入 、 更 有 趣 的 知识 这 里 就 不 展开 了 。 
9.1.5 文 持 却 鸡 肋 的 系统 颜色 
“系统 颜色 ” 指 的 是 什么 呢 ? 


我 们 都 知道 ，Windows 操 作 系 统 的 不 同 主题 的 弹 框 、 工 具 栏 之 类 的 
颜色 都 是 不 一 样 的 ， 这 些 不 一 样 的 颜色 就 称 为 系统 颜色 。 在 Web 中 ， 我 
们 也 可 以 使 用 这 些 颜 色 ， 我 们 可 以 实现 和 系统 主题 风格 类 似 的 web 组 件 
皮肤 效果 。 


那么 ， 都 有 哪些 系统 颜色 关键 字 呢 ? 





下 面 是 我 做 的 一 些 整理 。 注 意 ， 这 些 是 跟着 系统 走 的 ， 不 是 所 有 的 
系统 都 支持 ， 而 且 有 些 值 是 跟着 浏览 器 走 的 ， 在 Chrome 浏 览 器 下 可 能 
是 淡 灰 色 ， 而 在 下 下 可 能 是 白色 等 ， 如 图 9-4 所 示 (图 截 自 Chrome) 。 

















如 此 上 世纪 风格 的 色 值 表现 和 当下 设计 风格 格格 不 入 ， 加 上 色 值 跟 
者 系统 走 ， 最 终 表现 不 可 控 ， 使 得 在 实际 项 目 中 几乎 没有 任何 使 用 系统 
颜色 的 理由 ， 给 人 感觉 比较 鸡肋 。 




















ActiveBorder 
激活 态 窗 体 边框 。 


ActiveCaption 
激活 态 窗 体 标题 。 应 
该 使 用 CaptionText 前 景 
色 。 


AppWorkspace 
多 区 档 界 面 痛 景色 。 


Background 
桌面 背景 。 


ButtonFace 

三 维 元 素 的 表面 背景 
色 ， 之 所 以 会 呈现 3D 效 
果 ， 是 由 于 周围 有 一 层 
边框 。 应 该 使 用 Button 
Text 的 前 景色 。 


ButtonHighlight 

3D 元 素面 对 光源 的 边框 
色 ， 之 所 以 会 呈现 3D 效 
果 ， 是 由 于 周围 有 一 层 
边框 。 


ButtonShadow 

3D 元 素 痛 对 光源 的 边框 
色 ， 之 所 以 会 呈现 3D 效 
果 ， 是 由 于 周围 有 一 层 
边框 


ButtonText 
按 毛 交 本 。 需要 使 用 


ButtonFace 或 ThreeDFace | 


背景 色 。 


CaptionText 

标题 文本 ， 尺寸 意 子 ， 
以 及 滚动 条 简 头 意 子 。 
需要 使 用 ActiveCaption 
背景 色 。 

Bess 


| EE | 菜单 中 的 文本 。 应 使 
| GrayText | 用 Menu 背 景色 。 
| 忒 色 的 (disabled) 文 | 
本 。 | 
| es | Scrollbar 
| | 滚动 条 大 色 区 域 。 
| Highlight | 
| 控件 中 被 选中 的 项 。 “| 
| 应 使 用 HighlightText 前 | ThreeDDarkShadow 
| 景色。 | 远离 3D 元 素 光源 的 两 个 


| 边框 中 比较 暗 通常 为 
| 外 面 》 的 那个 颜色 。 








| HighlightText | 
控件 中 被 选中 的 项 的 文 | 人 
| 本 。 应 使 用 Highlight [ee 
| 有 景色 。 | 3D 元 素 的 表面 背景 
| | | 色 。 应 使 用 ButtonText 
| | 前 景色 。 
| InactiveBorder | 
非 激活 态 窗 体 边框 。 | 于 昌 
ThreeDHighiight 
| 面 对 3D 元 素 光 源 两 个 边 
| InactiveCaption E 高 《通常 为 外 面 ) 的 
| | 非 激活 态 窗 体 标题 。 ”| 那 一 个 。 
| 应 使 用 InactiveCaption | 
| Text 前 景色 。 | 
| | | ThreeDLightSshadow 
| | 面 对 3D 元 素 光源 的 两 个 


| InactiveCaptionText | | 边框 中 比较 暗 “通常 为 
非 激活 标题 的 文本 颜色 。 里 面 ) 和 








| 应 使 用 InactiveCaption | 
| 背景 色 。 | 
| 0 | ThreeDShadow 
| | 远离 3D 元 素 光源 的 两 个 
| InfoBackground | 边框 中 比较 高 (通常 为 
| 提示 框 控 件 背景 色 。 ”| 里 面 ) 的 那个 颜色 。 
| 应 使 用 InfoText 前 景 SE 
| ' Window 
| | 窗 体 背景 。 应 使 用 
| InfoText | WindowText 前 景色 。 
| 提示 框 控 件 文本 色 。 
应 使 用 InfoBackground | 
| 月 景色 。 ' WindowFrame 
Menu | 
| 菜单 背景 。 应 使 用 | WindowText 
| MenuText 前 景色 。 | 窗 体 中 的 文本 。 应 使 
| 用 Window 背 景色 。 
MenuText [| 





图 9-4 系统 颜色 关键 字 值 和 示意 














系统 颜色 虽然 又 冷门 又 不 好 看 ， 但 其 实 也 是 可 以 在 实际 项 目 中 有 所 
应 用 的 。 举 两 个 我 自己 实践 的 案例 : 一 是 在 编辑 费 中 模拟 块 状 内 容 〈( 非 
图 片 、 非 文字 ) 被 选中 效果 ， 为 了 和 原生 选中 的 效果 一 样 ， 使 用 了 系统 
颜色 ， 以 假 乱 真 ， 看 不 出 是 模拟 的 ;二 是 集成 了 众多 模块 的 工具 页 面 需 
要 有 一 个 即时 取 色 配色 功能 ， 主 要 是 给 设计 师 用 的 。 显 然 ， 传 统 的 
skin1.css、skin2.css 预 先 全 部 写 好 再 切换 的 方式 是 不 行 的 ， 因 为 模块 是 
分 散 且 独立 的 ， 色 值 是 不 确定 的 ， 也 不 能 说 入 库 走 变量 或 者 运行 Node.js 
工具 什么 的 ， 开 发 和 维护 成 本 都 很 高 ， 因 此 最 好 纯 Web 前 端 解 决 。 可 以 
采用 使 用 系统 色 作 为 模块 的 CSS 色 值 的 方式 实现 。 其 好 处 在 于 以 下 两 
点 。 











(1) 系统 颜色 本 身 有 颜色 ， 我 们 的 模块 是 可 以 即时 预览 的 ， 双 击 
htm1 模 块 文件 就 可 以 ， 没 有 任何 其 他 依赖 。 


(2) 系统 颜色 名 称 都 比较 高 冷 ， 非 常 适合 作为 变量 ， 痊 换 时 不 会 
发 生 冲 突 。 


于 是 ， 当 我 们 选取 某 一 颜色 后 ， 只 要 把 所 有 CSS 中 的 系统 颜色 变量 
蔡 换 成 选中 的 色 值 ， 任 意 组 装 的 模块 的 即时 配色 的 效果 就 实现 了 。 





9.2 CSS 世 界 的 background 很 单调 


CSS 世 界 中 的 background 大 部 分 有 意思 et 
中 才 出 现 的 ， 如 Multiple backgrounds 〈 多 背景 ) 、background- 
size (背景 尺寸 ) 、background-origin (背景 初始 定位 盒子 ) 、 
background-clip《〈 背 景 剪 切 盒子 ) 等 。 





相 比 之 下 ，CSS 志 界 支持 的 background 那 点 东西 就 显得 比较 单调 
了 ， 毕 竟 那 个 时 代 以 图 文 展示 为 主 ， 装 饰 和 美化 并 不 是 重点 。 





当 我 们 使 用 background 属 性 的 时 候 ， 实 际 上 使 用 的 是 一 系 
列 background 相 关 属 性 的 集合 ， 包 括 : 


。 background-image: none 

e background-position: 6 为 6% 

e。 background-repeat: repeat 

e background-attachment: scroll 


。 background-color: transparent 
如 果 是 IE9+ 浏 览 器 ， 则 还 包括 : 


e。 background-size: auto auto 
e。 background-origin: padding-box 


e。 background-clip: border-box 


本 书 仅 介 绍 浏览 器 都 支持 的 上 面 5 个 background 相 关 属 性 ， 虽 然 相 


比 之 下 有 些 单调 ， 但 一 些小 故事 还 是 有 的 。 
9.2.1 ”隐藏 元 素 的 background-image 到 底 加 不 加 载 


隐藏 元 素 的 background-image 到 底 加 不 加 载 呢 ? 想必 这 是 一 个 很 
多 人 都 感 兴趣 的 问题 。 


根据 我 的 测试 ， 一 个 元 素 如 果 display 计 算 值 为 none， 在 下 浏览 器 
下 GE8 一 正 11， 更 高 版 本 不 确定 ) 依然 会 发 送 图 片 请 求 ，Firefox 浏 览 
器 不 会 ， 人 至 于 Chrome 和 Safari 浏 览 器 则 似乎 更 加 智能 一 点 : 如 条 隐藏 元 
素 同 时 又 设置 了 background-image， 则 图 片 依 然 会 去 加 载 ， 如 果 是 父 
元 素 的 display 计 算 值 为 none， 则 背景 图 不 会 请 求 ， 此 时 浏览 器 或 许 放 
心地 认为 这 个 背景 图 暂时 是 不 会 使 用 的 。 


IE8 浏 览 器 支持 base64 图 片 ， 包 括 在 background-image 属 性 中 使 
用 ， 可 以 节约 一 个 网 络 请 求 。 但 是 ，base64 图 片 的 泻 染 性 能 并 不 高 ， 只 
适合 尺寸 比较 小 的 图 片 ， 大 尺寸 图 厂 慎 用 。 





如 果 想 用 background-image 实 现 鼠 标 光 标 经 过 变换 图 片 的 效果 
(例如 ， 灰 色 的 关闭 图 片 鼠 标 光 标 经 过 变 成 深 色 ) ， 则 务必 将 这 两 张 图 
片 合并 在 一 张 图 片上 ， 除 了 减少 请 求 外 ， 这 样 做 更 重要 的 好 处 是 交互 体 
验 更 好 了 。 如 果 图 片 不 合 在 一 起 ， 当 鼠标 光标 经 过 的 时 候 ， 就 会 去 请 求 
另外 一 张 图 片 的 地 址 ， 如 果 这 个 图 片 没 有 被 缓存 ， 则 请 求 发 出 去 到 图 片 
显示 是 有 一 段 时 间 的 ， 很 容易 出 现 鼠 标 光 标 经 过 关闭 图 片 ， 结 果 图 片 消 
失 的 情况 ， 实 际 上 图 片 不 是 消失 了 ， 而 是 还 在 请 求 的 路 上 。 











9.2.2 “与 众 不 同 的 background-position 百 分 比 计算 方式 


CSS 中 有 一 类 属性 值 被 称 作 <position> 值 ， 表 示 一 种 CSS 数 据 类 
型 、 二 维 坐标 空间 ， 用 于 设置 相对 盒子 的 坐标 。 


<position> 值 文 持 1 一 4 个 值 ， 可 以 是 具体 数值 ， 也 可 以 是 和 百分比 
值 ， 还 可 以 是 left、top、right、center 和 bottom 等 关键 字 。 图 9-5 
给 出 了 经 典 的 示意 。 


left center rioqht 


100px 


top 75px left 100px 或 


left 100px top 75px 





75px 


aight center 
或 center left 100% 
25% Lop 50% left 100% 


bottom left 25% 或 
top 100% 25% :或 
100% 25% 


图 9-5 xposition> 值 经 典 示 意 


/VE 


如 采 缺 省 侦 移 关键 字 ， 则 会 认为 是 center， 因 此 background- 
position:top center 可 以 直接 写成 background-position:top。 





IE8 浏 览 需 最 多 只 文 持 同 时 出 现 2 个 值 ， 从 下 9 开始 文 持 同时 出 现 3 个 
值 或 4 个 值 ， 作 用 是 指定 定位 的 侦 移 计算 从 哪个 方位 算 起 。 例 如 : 





background-position: right 46px bottom 26pX 


表示 距离 右边 缘 40 像 系 ， 距 离 底 边 缘 20 像 素 。 


<position> 值 也 文 持 百分比 值 ， 不 过 其 表现 与 CSS$ 中 其 他 的 百 分 
比 单位 表现 都 不 一 样 。 例 如 ， 一 个 图 片 : 


img { position: absolute; left: 166%; } 


一 定 是 在 包含 块 的 外 部 。 但 是 ， 在 <position> 值 中 却 是 不 一 样 的 表 
现 ， 如 图 9-6 所 示 。 其 中 ， 上 面 美女 图 片 是 packground- 
position:166% 166% 定 位 ， 下 面 半 透明 的 美女 图 片 是 left :166% 定 
位 。 位 置 明显 不 一 样 ， 主 要 是 <position> 值 的 百分比 值 有 着 特殊 的 计 
算 公式 : 








positionX = (容器 的 宽度 到 片 的 宽度 ) * percentX; 











positionY = (容器 的 高 度 到 片 的 高 度 ) * percentY; 





因此 ， 当 background-position:166% 166% 时 候 ， 实 际 定位 值 就 是 容 
器 尺寸 和 网 请 尺寸 的 震 ， 于 是 就 有 了 右 下 角 所 示 的 定位 效果 。 


有 了 这 个 公式 ， 我 们 也 就 能 理解 百分比 负 值 的 一 些 表 现 了 。 比 方 
说 ， 你 觉得 下 面 这 行 CSS 代 码 对 应 图 片 的 表现 是 怎样 的 ? 
是 不 是 觉得 图 片 应 该 是 定位 在 容器 的 左上 角 ， 并 有 部 分 区 域 超出 不 可 
见 ? 但 是 ， 实 际 出 现 的 效果 如 图 9-7 所 示 ， 接 近 于 下 面 CSS 代 码 的 效果 : 


background-position: 46px 16px; 

















图 9-6 ”两 个 不 同 的 百分比 定位 效果 





图 9-7 负 值 百分比 定位 图 片 在 容器 内 效果 示意 

深 受 传统 百分比 定位 迷惑 的 我 们 可 能 一 时 会 想 不 通 ， 明 明 是 个 负 值 

百分比 定位 ， 怎 么 会 是 一 个 正 值 效 果 呢 ?我 们 套用 <position> 百 分 比 
值 计 算 公 式 ， 束 露 然 开明 了 ! 


此 案例 中 容器 尺寸 是 160x160， 图 片 尺 寸 是 256x192， 图 片 尺 寸 大 于 
容器 尺寸 ， 所 以 : 





。 ( 容 右 的 宽度 -图 片 的 客 度 ) x (-50%) 的 结 采 是 个 正 值 ; 
。 (容器 的 高 度 - 图 片 的 高 度 ) x (-50%) 的 结 末 也 是 个 正 值 。 











因此 ， 最 终 的 表现 并 不 是 图 片 定位 在 容器 外 ， 而 是 定位 在 容 絮 内 。 


9.2.3 ” background-repeat 与 泻 染 性 能 


background-repeat 支 持 repeat、repeat-x、repeat-y 这 几 个 
值 ， 语 义 清晰 ， 兼 容 性 好 ， 没 什么 有 趣 的 故事 。background-repeat 
以 前 用 得 很 多 ， 但 如 今 设计 趋势 是 喜欢 展 平 和 纯色 ， 其 使 用 频率 下 降 明 
显 ， 反 倒是 在 实现 一 些 复 杂 纹 理 或 者 配合 “ 蝉 原则 ”实现 随机 背景 这 些 比 
较 新 潮 的 地 方 见 到 的 比较 多 。 





唯一 值得 一 提 的 一 个 小 知识 点 就 是 background-repeat 的 性 能 。 
举 个 例子 ， 要 实现 某 黑 色 半 透明 遮 音 背景， 因为 IE8 并 不 文 持 rgba 半 透 
明 背 景色 ， 所 以 为 了 兼容 我 们 决定 使 用 一 个 半 透 明 图 片 代 蔡 ， 假 设 图 片 
名 为 alpha.png， 则 CSS 代 码 如 下 : 





.overlay { 
background: url(alpha.png); 


background: rgba(6,6,6,.75); 
} 








然后 有 些 人 为 了 追求 极致 ， 就 把 alpha.png 做 成 了 1 像素 x1 像 素 大 
小 ， 确 实 图 片 太 寸 小 了 那么 一 点 点 ， 但 是 遮 尝 背 景 出 现 的 时 候 会 有 明显 
的 卡 顿 ， 体 验 非常 不 好 。 完 其 原因 ， 就 是 平 铺 图 片 太 寸 太 小 ， 平 铺 次 数 
太 多 ， 泻 染 太 吃力 ， 其 实 我 们 大 可 把 背景 图 保存 成 100 像 素 x100 像 素 大 
小 ， 这 样 一 来 ， 图 片 尺寸 并 没有 大 多 少 ， 但 古 泻 染 性 能 却 有 明显 提升 。 








9.2.4 外 强 中 于 的 background-attachment :fixed 


background-attachment:fixed 怕 是 很 多 人 都 没 用 过 ， 甚 至 都 没 
见 过 。 这 是 一 个 IE7 浏 览 器 就 开始 支持 的 CSS 声 明 。 在 CSS 世 界 
中 ，background-attachment 支 持 scroll 和 fixed 两 个 属性 值 ， 其 中 


scrol1 是 默认 值 ， 就 是 平 种 使 用 背景 图 的 效果 表现 ，fixed 表 示 背 景 相 
对 于 当前 文档 视 区 定位 ， 也 就 是 页 面 再 怎么 深 动 背景 图 片 位 置 依旧 纹 丝 
不 动 ， 稳 奉 泰山 。 








听 上 去 ，background-attachmen:fixed 应 该 和 position: 
fixed 声 明 一 样 ， 是 个 很 厉害 的 角色 才 对 。 但 实际 上 其 外 强 中 干 ， 在 某 
些 场合 它 确实 很 历 害 ， 但 是 局 限 太 大 ， 没 法 实用 。 




















举 个 例子 。 要 实现 一 个 图 片 局 部 动态 模糊 效果 ， 如 图 9-8 所 示 。 此 
时 ，background-attachment:fixed 就 可 以 大 显 神威 了 : 





图 9-8 方块 区 域 可 拖 忠 ， 移 动 到 哪里 哪里 就 模糊 


.box { 
width: 256px; height: 192px; 
background-image: url(1.jpg); 
background-attachment: fixed; 
position: relative; 
overflow: hidden; 


} 


.box > .drag { 
width: 166px; height: 166pX; 
background: inherit; 
filter: blur(5px); 
cursor: grab; 
position: absolute; 








此 时 ， 只 要 .drag 元 素 动态 改变 left/top 值 ， 我 们 的 功能 就 实现 了 。 
为 .drag 元 素 的 background 继 承 于 父 元 素 .box， 同 样 的 背景 图 ， 同 样 
的 background-attachment: fixed 锁 定 ， 根 本 就 不 需要 JavaScript 动 
态 改变 background-position 人 位置， 因为 元 素 都 是 相对 于 文档 视 区 定 
位 的 。 








这 看 似 美 好 ， 却 有 一 个 很 大 的 局 限 性 ， 那 就 是 页 面 的 高 度 不 能 超过 
一 屏 ， 因 为 页 面 一 旦 可 以 滚动 ， 效 果 就 完全 被 毁 反 ， 背 景 图 立马 就 显示 
不 全 了 ， 因 为 元 素 被 深 走 了 ， 但 是 背景 图 还 是 固定 的 。 如 图 9-9 所 示 。 














四 





bs 


图 9-9 页 面 滚动 时 候 ， 背 景 定位 完全 不 合乎 预期 





而 绝 大 多 数 网 页 都 是 可 滚动 的 ， 这 就 让 background- 
attachment:fixed 只 能 局 限于 窗 体 背景 图 的 使 用 上 。 当 然 ， 也 有 不 太 
好 的 支持 方法 ， 就 是 packground-attachment: fixed 交 互 做 出 一 个 
独立 的 小 页 面 ， 然 后 主页 面 使 用 一 个 小 的 ijframe 散 套 。 





IE9 及 以 上 版 本 浏览 器 新 增 了 一 个 background- attachment 属性 
值 1ocal， 难 道 它 就 是 用 来 解决 上 面 的 “不 合乎 预期 ”的 现象 的 ? 不 好 意 
思 ， 你 想 多 了 ， 它 们 不 是 一 路 的 。1local 的 作用 是 ， 如 果 .box 元 素 可 以 


滚动 ， 则 .box 元 素 的 背景 图 也 可 以 被 滚 走 ， 默 认 的 scrol1 值 是 固定 
的 ， 和 fixed 无 半点 儿 关 系 。 


9.2.5 background-color 背 景色 永远 是 最 低 的 


什么 意思 呢 ? 就 是 packground 无 论 是 单 背景 图 还 是 多 背景 图 ， 背 
景色 一 定 是 在 最 底下 的 位 置 。 知 道 这 一 特性 有 什么 作用 呢 ? 为 了 及 时 准 
确 反 馈 用 户 的 点 击 行为 ， 我 们 会 在 链接 或 按钮 元 素 上 增加 :active 样 
式 ， 通 常 的 思路 是 :active 时 变换 一 下 背景 色 ， 但 是 这 样 有 一 个 很 大 的 
问题 ， 即 每 个 按钮 的 背景 色 都 是 不 一 样 的 ， 那 岂 不 是 要 写 很 多 
个 :active 样 式 ?” 有 没有 什么 整 站 通用 的 简单 代码 呢 ? 当然 有 。 我 们 可 
以 试 试 使 用 背景 图 片 代 蔡 背 景色 。 例 如 : 























a[href]:active，button:active { 
background-image: linear-gradient(to top，rgba(6,9,86,.65)，rgba(6,0,0,.9 





5)); 
} 














因为 背景 色 一 定 是 在 最 底下 的 位 置 ， 所 以 这 里 的 background-image 一 
定 是 履 盖 在 按钮 等 元 素 背 景色 之 上 的 ， 不 会 影响 按钮 原来 的 背景 色 。 





如 果 是 桌面 端 Web 项 目 ， 需 要 兼容 IE8 和 IE9 浏 览 器 ， 我 的 建议 是 使 
用 一 个 同等 效果 的 PNG 图 片 代 替 ， 有 具体 代码 如 下 : 





a[href]:active，button:active { 

/* IE8, IE9 */ 

background-image: url(data:image/png;base64,iVBORwOKGgoAAAANSUhEUgAAAAoA 
AAAKCAY 
AAACNMs+9AAAAGXRFWHRTb2Z8d2FyZQBBZG9iZSBJbWFnZVJl1YWR5ccl1l1PAAAABhJREFUeNpiz 
GBg4Gug 
AjCOKqSvQoAAAwB65ACNoFNUMwAAAABJRUSErkJggg==); 

/* 工 E16+ */ 

background-image: linear-gradient(to top，rgba(6,9,86,.65)，rgba(6,0,0,.9 


5)); 
} 


大 功 告 成 ! 
9.2.6 ”利用 多 背景 的 属性 hack 小 技 蕊 


里 然 下 8 浏览 占 并 不 文 持 多 背景 ， 但 是 并 不 表示 IE8 浏 览 器 和 多 背景 
效果 无 缘 。 因 为 IE8 浏 览 器 支持 :before 和 :after 两 个 伪 元 素 ， 所 以 配 
合 z-index 负 值 ， 我 们 可 以 实现 最 多 3 个 图 片 的 多 背景 效果 ， 对 绝 大 部 
分 的 需求 来 说 足够 了 。 











另外 ， 我 们 还 可 以 利用 多 背景 来 区 分 特定 的 浏览 器 。 举 个 例子 ， 
IE9 是 支持 SVG 背景 图 片 的 ， 但 IE8 不 支持 ， 于 是 我 们 可 以 让 IE8 浏 览 器 
加 载 PNG 图 片 ， 而 IE9 及 以 上 版 本 浏览 器 加 载 SVG 图 片 ， 这 样 就 不 用 使 
用 烦人 的 多 倍 图 了 。 下 面 问题 来 了 ， 如 何 有 效 地 区 分 IE8 和 IE9 浏 览 器 
呢 ? 





常用 的 :root .ie9 {} hack 技 巧 会 提高 元 素 的 权重 ， 并 不 是 一 个 
完美 的 方法 ， 而 巧 用 一 些 CSS3 属 性 或 属性 值 做 兼容 处 理 则 是 上 乘 的 技 
术 策 略 。 例 如 ， 这 里 就 可 以 这 样 处 理 ; 


.bg { 
background: url(icon.png); 


background: url(icon.svg), none; 


} 











IE8 浏 览 器 不 认识 多 背景 的 写法 ， 自 然 会 忽略 第 二 行 声明 ， 只 认 第 
一 行 的 PNG 背 景 ，IE9 及 以 上 版 本 浏览 器 则 会 使 用 后 面 的 声明 使 用 SVG 
图 片 。 


趁 热 打铁 ， 请 问 如 果 要 区 分 正 9 及 以 下 版 本 和 了 下 10 及 以 上 版 本 ， 该 
怎么 办 呢 ? 我 们 可 以 这 么 处 理 : 


.bg { 
background: url(loading.gif); 


background: url(loading.png), linear-gradient(to top, transparent, trans 
parent); 


} 





IE9 不 认识 CSS3 渐 变 ， 因 此 会 忽略 第 二 行 CSS 声 明 。 
9.2.7 ”渐变 背景 和 rgba 背 景色 的 兼容 处 理 


IE9 浏 览 喜 不 文 持 背景 渐变 ， 不 过 ， 也 是 有 手段 可 以 做 兼容 的 ， 那 
就 是 使 用 正 私 有 的 渐变 滤 锐 。 例 如 ， 一 个 红 蓝 渐变 ， 可 以 使 用 下 面 的 代 
人 码 : 


filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=red, endc 


olorstr= 
blue, gradientType=1); 





这 行 滤 镜 代码 主要 有 3 个 参数 ， 依 次 是 startcolorstr、endcolorstr 
和 gradient Type。 其 中 gradientType=1 代 表 横 向 渐 

变 ，gradientType=6 代 表 纵 回 淅 渐变 ，startcolorstr 代 表 渐 变 起 始 
的 色彩 。 除 了 使 用 颜色 关键 字 ， 还 可 以 使 用 十 六 进 制 颜色 表示 法 ， 如 

startcolorstr=#FF6666; endcolorstr 代 表 渐 变 结尾 的 色彩 ， 也 支 
持 十 六 进 制 颜色 表示 法 ， 如 endcolorstr=#@666FF。 





想 要 渐变 半 透 明 怎 么 办 ? 可 以 使 用 下 浏览 器 的 8 字符 的 十 六 进 制 颜 
色 表 示 法 ， 其 格式 为 #AARRGGBB，AA、RR、GG、BB 均 为 十 六 进 制 正 整 
数 ， 取 值 范 围 为 00 一 FF。RR 指 定 红 色 值 ，GG 指 定 绿色 值 ，BB 指 定 蓝 色 


值 ，AA 指 定 透 明度 。00 表 示 完 全 透明 ，FEF 表 示 完 全 不 透明 。 超 出 取 值 
范围 的 值 将 被 恢复 为 默认 值 。 人 例如， 渐变 起 始 红色 可 以 写 
成 startcolorstr= #FFFF0066。 


有 些 人 并 不 清楚 如 何 将 0 一 1 的 CSS3 标 准 透明 度 值 转换 成 十 六 进 
制 。 事 实 上 ， 可 以 这 样 处 理 : 打开 浏览 器 控制 台 ， 假 设 需要 转换 的 透明 
度 是 opacity， 则 可 以 输入 下 面 的 代码 再 回 车 : 


Math.round(256 * opacity) .toSstring(16); 


综 上 所 述 ， 要 想 实 现 一 个 100% 红 色 到 50% 透 明度 蓝 色 垂 直 渐 变 ， 可 
以 使 用 如 下 代码 组 合 : 


.gradient { 
filter: 


progid:DXImageTransform.Microsoft.gradient(startcolorstr=#FFFF6666,endcolo 
rstr=#7 


F6666FF,gradientType=6) ; 


background: linear-gradient(to bottom，red，rgba(6,6,255,， .5)); 
} 





IE8 浏 览 器 不 支持 rgba 半 透明 缘 景色， 除了 使 用 PNG 图 片 外 ， 也 可 
以 使 用 渐变 滤 镜 来 兼容 。 例 如 ， 要 实现 50% 半 透明 的 黑色 背景 ， 可 以 这 
样 做 : 





.bgcolor { 

background: rgba(6,6,6,，.5); 

filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr= 
#7F606666,endcolorstr=#7F6060000 ) ; 


} 
:root .bgcolor { 
filter: none; 


} 





让 渐变 起 始 色 和 结束 色 保 持 一 致 ， 就 可 以 实现 纯 半 透明 背景 色 效 果 了 。 
在 IE9 浏 览 器 下 ，rgba 半 透明 和 filter 渐 变 会 同时 起 作用 ， 因 此 使 
用 :root 选 择 嚣 重 置 了 一 下 。 








第 10 章 “元素 的 显示 与 隐藏 


使 用 CSS 让 元 素 不 可 见 的 方法 很 多 ， 甬 裁 、 定 位 到 屏幕 外 、 明 度 变 
化 等 都 是 可 以 的 。 虽 然 它 们 都 是 肉眼 不 可 见 ， 但 背后 却 在 多 个 维度 上 都 
有 差别 。 





下 面 是 我 总 结 的 一 些 比较 好 的 隐藏 实践 。 





。 如 果 和 希望 元 系 不 可 见 ， 同 时 不 占据 空间 ， 辅 助 设备 无 法 访问 ， 同 时 
不 泻 染 ， 可 以 使 用 <script> 标 签 隐 藏 。 例 如 : 


<«script type="text/html"> 


<img src="1.jpg"> 
</script> 





此 时 ， 图 刻 1.jpg 古 不 会 有 请 求 的 。<script> 标 签 是 不 支持 般 套 
的 ， 因 此 ， 如 果 和 硕 望 在 Cscript> 标 和 俭 中 再 放置 其 他 不 演 染 的 模板 内 
容 ， 可 以 试 试 使 用 <textarea> 元 素 。 例 如 : 
<script type="text/html"> 


<img src="1.jpg"> 
<textarea style="display:none;"> 


<img src="2.jpg"> 
</textarea> 
</script> 





图 片 2.jpg 也 是 不 会 有 请 求 的 。 


另外 , 《script> 标 签 隐 藏 内 容 获 取 使 


用 script.innerHTML，<textarea> 使 用 textarea.value。 





。 如 果 希 望 元 素 不 可 见 ， 同 时 不 占据 空间 ， 辅 助 设备 无 法 访问 ， 但 资 
源 有 加 载 ，DOM 可 访问 ， 则 可 以 直接 使 用 display :none 隐 藏 。 例 
如 : 


.dn { 
display: none; 
} 


。 如 宁 和 希望 元 系 不 可 见 ， 同 时 不 占据 空间 ， 辅 助 设备 无 法 访问 ， 但 显 
隐 的 时 候 可 以 有 transition 淡 入 淡出 效果 ， 则 可 以 使 用 : 








.hidden { 
position: absolute; 


visibility: hidden; 
} 








。 如 果 和 希望 元 素 不 可 见 ， 不 能 点 击 ， 辅 助 设备 无 法 访问 ， 但 占据 空间 
保留 ， 则 可 以 使 用 visibility:hidden 隐 藏 。 例 如 : 
.vh { 


visibility: hidden; 
} 








。 如 果 希 望 元 素 不 可 见 ， 不 能 点 击 ， 不 占据 空间 ， 但 键盘 可 访问 ， 则 
可 以 使 用 clip 前 裁 隐藏 。 例 如 : 





.Clip { 
position: absolute; 
clip: rect(60 9 0 0); 
} 
.Out { 
position: relative; 
left: -999em; 


站 
。 如 采 和 希望 元 素 不 可 见 ， 不 能 上 点击， 但 占据 空间 ， 且 键盘 可 访问 ， 则 
可 以 试 试 relative 隐 藏 。 例 如 ， 如 果 条 件 允 许 ， 也 就 是 和 层 登 上 
下 文 之 间 存 在 设置 了 背景 色 的 父 元 素 ， 则 也 可 以 使 用 更 友好 的 z- 
index 负 值 隐 藏 。 例 如 : 











.lower { 
position: relative; 


z-index: -1; 


} 











。 如 果 和 希望 元 素 不 可 见 ， 但 可 以 上 点击， 而 且 不 占据 空间 ， 则 可 以 使 用 
透明 度 。 例 如 ; 


.opacity { 
position: absolute; 
opacity: 0@; 
filter: Alpha(opacity=0); 
} 








。 如 果 单 纯 希 望 元素 看 人 不见， 但 位 置 保留 ， 依 然 可 以 点 可 以 选 ， 则 直 
接 让 透明 上 度 为 96。 例如 : 


.Opacity { 
opacity: 0@; 


filter: Alpha(opacity=0); 
} 








读者 可 以 根据 实际 的 隐藏 场景 选择 合适 的 隐藏 方法 。 不 过 ， 实 际 开 
发 场景 干 变 万 化 ， 上 面 罗列 的 实践 不 足以 履 盖 全 部 情形 。 例 如 ， 在 标签 
受 限 的 情况 下 希望 隐藏 某 文 字 ， 可 能 使 用 text-indent 缩 进 是 最 友好 的 
方法 。 如 果 和 希望 显示 的 时 候 可 以 加 一 个 transition 动 画 ， 束 可 能 要 使 








用 max-height 进 行 隐 藏 了 了 。 例 如 ; 


.hidden { 
max-height: 6; 


overflow: hidden; 


} 





此 案例 在 3.3 节 的 max-height 部 分 己 有 展示 ， 这 里 就 不 多 说 了 。 


10.1 display 与 元 素 的 显 隐 


对 一 个 元 素 而 言 ， 如 果 display 计 算 值 是 none 则 该 元 素 以 及 所 有 后 
代 元 素 都 隐藏 ， 如 果 是 其 他 display 计 算 值 则 显示 。 





display 可 以 说 是 Web 显 隐 交 互 中 出 场 频 率 最 高 的 一 种 隐藏 方式 ， 
是 真正 意义 上 的 隐藏 ， 干 净利 落 。 人 们 对 它 的 认识 也 比较 准确 ， 无 法 点 
击 ， 无 法 使 用 屏幕 阅读 器 等 辅助 设备 访问 ， 占 据 的 空间 消失 ， 但 很 多 人 
就 仅 局 限于 此 了 ， 实 际 上 ，display:none 的 故事 并 不 只 有 这 么 一 点 
至 硬 





在 Firefox 浏 览 器 下 ，display :none 的 元 素 的 background-image 
图 片 是 不 加 载 的 ， 包 括 父 元 素 display:none 也 是 如 此 ; 如 果 是 Chrome 
和 Safari 浏 览 锋 ， 则 要 分 情况 ， 知 父 元 素 display:none， 图 片 不 加 载 ， 
各 本 吴 背 景 图 所 在 元 素 隐 藏 ， 则 图 片 依旧 会 去 加 载 ; 对 下 浏览 右 而 言 ， 
无 论 怎样 都 会 请 求 图 片 资源 。 





CSS 和 HTML 代 码 如 下 : 


.bg1 { 

background: url(../Images/1.png); 
} 
.bg2 { 


background: url(../Images/2.png); 
} 
<div hidden class="bg1"></div> 
<div hidden><div class="bg2"></div></div> 





在 Chrome 浏 览 器 下 的 网 络 请 求 如 图 10-1 所 示 。 





Regex Hide data URLs All ' XHR JS CSS ER 

10 ms 20ms A0n 50 mi: 50 1 7 
Name Method | Status Type Initiator Size 
1.png GET 200 png backgroundgd-i... E 








图 10-1 Chrome 浏览 器 下 图 片 请 求 


我 们 发 现 只 加 载 了 1.png， 因 此 ， 在 实际 开发 的 时 候 ， 如 头 图 轮 播 
切换 效果 ， 那 些 默 认 需 要 隐藏 的 图 片 作 为 背景 图 藏 在 隐藏 元 系 的 子 元 素 
上 ， 微 小 的 改动 就 可 以 明显 提升 页 面 的 加 载体 验 ， 可 以 说 是 非常 实用 的 
小 技巧 。 











另外 ， 如 果 不 是 packground-image 图 片 ， 而 是 <img> 元 素 ， 则 设 
置 display:none 在 所 有 浏览 器 下 依旧 都 会 请 求 图 片 资 源 。 


照 理 说 ，display :none 的 元 素 应 该 是 无 法 被 点 击 
的 ，display :none 可 以 非常 彻底 地 隐藏 ， 肯 定 不 能 点 击 啊 ! 但 是 ， 下 
面 这 种 情况 却 例外 : 


<form> 
<input id="any" type="submit" style="display:none;"> 


<label for="any"> 提 交 </1label> 
</form> 





此 处 submit 类 型 的 “提交 ”按钮 设置 了 display :none， ni 
点 击 “ 提 交 ” 的 时 候 ， 隐 藏 的 按钮 依然 会 触发 click、 触 发 表单 提交 ， 


现象 出 现在 IE9 及 以 上 版 本 浏览 器 以 及 其 他 现代 浏览 器 中 。 


设置 display:none 的 意义 在 于 ， 当 按钮 和 <labe1> 元 素 不 在 一 个 
水 平 线 上 的 时 候 ， 点 击 <labe1> 元 素 不 会 触发 锚 点 定位 。 但 是 我 并 不 推 
XX 么 做 ， 因 为 submit 按 钮 会 丢失 键 盘 可 访问 性 。 


HTML 中 有 很 多 标签 和 属性 天 然 display :none， 如 
<style>、<script> 和 HTML5 中 的 <dialog> 元 素 ( 如 果 浏 览 器 支 
持 ) 。 如 果 这 些 标签 在 <body> 元 素 中 ， 设 置 display: block 是 可 以 让 
内 联 CSS 和 JavaScript 代 码 直接 在 页 面 中 显示 的 。 例 如 : 





<style style="display:block;"> 


.1 { float: left; } 
</style> 





页 面 上 就 会 出 现 .1 { float: left; } 的 文本 信息 ; 如 果 再 设 
置 contenteditable= "true"， 在 有 些 浏 览 器 下 (如 Chrome) ， 甚 至 
可 以 直接 实时 编辑 预览 页 面 的 样式 。 





还 有 一 些 属性 也 是 天 然 display:none 的 。 例 如 ，hidden 类 型 的 
<input> 输 入 框 : 





<input type="hidden" name="id" value="1"> 





专门 用 来 放置 类 似 token 或 者 id 这 样 的 隐藏 信息 ， 这 也 说 明 表 单元 素 的 
显示 与 隐藏 并 不 影响 数据 的 提交 ， 其 真正 影响 的 是 disabled 属 性 。 





HTML5 中 新 增 了 hidden 这 个 布尔 属性 ， 可 以 让 元 素 天 
生 display :none 隐 藏 。 例 如 : 





<div hidden> 看 不 见 我 </divy> 


IE11 以 及 其 他 现代 浏览 堪 都 支持 它 ， 因 此 ， 如 果 要 兼容 蝎 面 端 ， 需 
要 如 下 CSS 设 置 : 
[hidden] { 

display: none; 

} 

display:none 显 隐 控 制 并 不 会 影响 CSS3 animation 动 画 的 实现 ， 
但 是 会 影响 CSS3 transition 过 渡 效 果 执 行 ， 因 此 transition 往 往 和 
visibility 属 性 走 得 比较 近 。 








对 于 计数 器 列表 元 素 ， 如 果 设 置 display :none， 则 该 元 素 加 入 计 
数 队 列 。 举 个 例子 ，10 个 列表 从 1 开始 递增 ， 假 设 第 二 个 列表 设置 了 
display :none， 则 原来 的 第 三 个 列表 计数 变 成 2， 最 后 总 计数 是 9。 





10.2 _ visibility 与 元 素 的 显 隐 
10.2.1 不 仅仅 是 保留 空间 这 么 简单 


有 一 些 人 简单 地 认为 display:none 和 visibility:hidden 两 个 隐 
藏 的 区 别 就 在 于 : display :none 隐 藏 后 的 元 素 不 占据 任何 空间 ， 
而 visibility:hidden 隐 藏 的 元 素 空间 依旧 保留 。 实 际 上 并 没有 这 人 么 
简单 ，visibility 是 一 个 非常 有 故事 的 属性 。 











1. visibility 的 继承 性 


首先 ， 它 最 有 意思 的 一 个 特点 就 是 继承 性 。 父 元 素 设 
置 visibility:hidden， 子 元 素 也 会 看 不 见 ， 究 其 原因 是 继承 性 ， 子 
元 素 继承 了 visibility:hidden， 但 是 ， 如 果子 元 素 设 置 了 
visibility:visible， 则 子 元 素 又 会 显示 出 来 。 这 个 和 display 隐 藏 
有 着 质 的 区 别 。 





我 们 看 一 个 例子 来 切实 感受 一 下 ，HTML 代 码 如 下 : 


<ul style="visibility:hidden;"> 
<1i style="visibility:visible;"> 列 表 1</1i> 
<1i> 列 表 2</1i> 


<1i> 列 表 3</1i> 
<1i style="visibility:visible;"> 列 表 4</1i> 
</ul> 





列表 父 元 素 visibility:hidden， 千 万 不 要 想当然 地 认为 此 时 所 
有 子 元 素 就 都 不 可 见 了 ， 最 终 效 果 如 图 10-2 所 示 , “列表 1” 和 “列表 42 依 
上 日 清晰 可 见 。 





眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/10/2-1.php 或 者 扫 右 侧 
的 二 维 码 。 





这 种 visibility:visible 后 代 可 见 的 特性 ， 在 实际 开发 的 时 候 非 
党 有用。 例如 ， 它 可 以 让 异步 加 载 时 体验 更 好 。 举 个 我 上 周 项 目 中 过 到 
的 案例 ， 使 用 头像 上 传 功能 ， 上 传 完毕 要 进入 剪裁 界面 ， 界 面 如 图 10-3 
所 示 。 








图 10-2 visibility 继承 性 演示 效果 


夫 尺 寸 了 预览 
草 载 下 城 


中 尺 才 预览 


上 尺寸 预览 


图 10-3 “剪裁 界面 示意 














这 里 就 有 一 个 异步 的 过 程 ， 后 端 只 返回 了 一 个 图 片 地 址 ， 我 们 需要 
先 动态 获取 图 片 尺寸 ， 再 去 计算 ， 以 便 准 确 显示 缩 略 效果 以 及 初始 化 剪 
裁 功 能 。 比 较 差 一 点 儿 的 方法 就 是 先 用 默认 头像 占 位 ， 等 获取 到 图 片 尺 
寸 后 再 蔡 换 ， 或 者 借助 visibility 属 性 。 





模块 外 部 容器 设置 visibility:hidden， 剪 裁 区 域 里 面 放 一 个 加 
载 效 果 ， 设 置 visibility:visible。 图 片 尺寸 获取 成 功 后 ， 再 正常 初 
始 化 ， 然 后 让 外 部 容器 visibility 属 性 重 置 为 visible。 这 样 体验 就 
会 好 很 多 ， 用 户 只 会 看 到 “加 载 中 ”> 剪裁 界面 >， 而 不 是 “ 占 位 界面 ~ 加 
载 中 -最终 操作 界面 。 





HTML 示 意 如 下 : 





<div style=" 
<div class 


visibility:hidden;"> 
="main-box"> 
<div class="operate-box"> 
<i class="icon-loading" style="visibility:visible;"> 


| 


加 载 中 ... 





</i> 
</div> 


<div class="button-box"> 
<button> 确 定 </button> 
<button> 取 消 </button> 


</div> 

</div> 

<div class="preview-box"> 
大 ， 中 ， 小 预览 图 . 人 


</div> 


</div> 





2. visibility 与 CSS 计 数 器 


visibility:hidden 不 会 影响 计数 器 的 计数 ， 这 和 display :none 
完全 不 一 样 。 举 个 例子 ， 如 下 CSS 和 HTML 代 码 : 


.vh { 
visibility: hidden; 

} 

.dn { 
display: none; 

} 

ol { 
border: 1px solid; 
margin: 1lem 6; 
counter-reset: test; 

} 

li:after { 
counter-increment: test; 
content: counter(test); 

} 

<01> 
<1i> 列 表 </1i> 
<1li class="dn"> 列 表 </1iy> 
<1i> 列 表 </1i> 
<1i> 列 表 </1i> 

</o01> 

<01> 
<1i> 列 表 </1i> 
<1li class="vh"> 列 表 </1iy> 
<1i> 列 表 </1i> 
<1i> 列 表 </1i> 

</o01> 

















结果 如 图 10-4 所 示 。 
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图 10-4 visibility 和 display 隐 藏 与 CSS 计 数 器 效果 


可 以 看 到 ，visibility:hidden 虽 然 让 其 中 一 个 列表 不 可 见 了 ， 
但 是 其 计数 效果 依然 在 运行 。 相 比 之 下 ， 设 置 display :none 的 列表 就 
完全 没有 参与 计数 运算 。 


3. visibility 与 transition 





下 面 的 CSS 是 会 让 .box 元 素 hover 时 显示 .target 子 元 素 ， 但 不 会 
有 过 渡 效 果 : 


.box > .target { 
display: none; 
position: absolute; 
opacity: 0@; 
transition: opacity .25s; 
} 
.box:hover > .target { 
display: block; 
opacity: 1; 
} 





但 是 ， 下 面 的 CSS 语 句 却 可 以 让 .target 子 元 素 有 淡出 的 过 渡 效 果 : 





.box > .target { 
position: absolute; 
opacity: 0@; 
transition: opacity .25s; 
visibility: hidden; 

} 


.box:hover > .target { 
visibility: visible; 
opacity: 1; 





这 是 为 什么 呢 ? 因为 CSS3 transition 支 持 的 CSS 属 性 中 有 
visibility， 但 是 并 没有 display。 


由 于 transition 可 以 延 时 执行 ， 因 此 ， 和 visibility 配 合 可 以 使 
用 纯 CSS 实 现 hover 延 时 显示 效果 ， 由 此 提升 我 们 的 交互 体验 。 





图 10-5 所 示 是 一 个 很 常见 的 hover 悬 浮 显 示 列 表 效 果 ， 而 且 有 多 个 
触发 点 相 邻 ， 对 于 这 种 hover 交 互 ， 如 果 在 显示 的 时 候 增加 一 定 的 延 
时 ， 可 以 避免 不 经 意 触 碰 导致 覆盖 目标 元 素 的 问题 。 例 如 ， 图 10-5 虽 然 
显示 的 是 第 一 行 的 下 拉 列 表 ， 但 真相 即 可 能 是 : 我 本 来 想 去 hover 第 二 
行 的 “操作 ”文字 ， 但 是 由 于 鼠标 光标 移动 路 径 不 小 心经 过 了 第 一 行 
的 “操作 >”， 结 果 把 第 二 行 本 来 hover 的 “操作 ” 履 盖 了 ， 必 须 重 新 移出 
去 ， 避 开 干 扰 元 素 ， 重 新 hover 才 行 。 如 此 一 来 ， 体 验 就 不 好 了 。 




















10-5 hover 显示 列表 示意 


但 是 有 了 visibility 属 性 和 transition 延 时 ， 我 们 就 可 以 把 这 种 
不 悦 的 体验 消除 掉 ， 关 键 的 HTML 和 CSS 代 码 如 下 : 





< 七 d> 
<a _ href> 操 作 v</ay> 
<div class="list"> 
<a href> 编 辑 </a> 





<a href> 删 除 </a> 
</div> 
</td> 
.list { 
position: absolute; 
visibility: hidden; 
} 
td:hover .list { 
visibility: visible; 
transition: visibility 6s .2s; 


} 





transition 在 hover 时 候 声 明 可 以 让 鼠标 光标 移出 的 时 候 列 表 无 
延 时 地 迅速 隐藏 。 





有 本 二 面 当 我 们 鼠标 光标 奔 疝 第 二 行 的 “操作 ”按钮 ， 
但 不 小 心经 过 第 一 行 “操作 ”按钮 时 ， 就 不 会 发 生 瞬 间 出 现 列 表 而 窗 盖 目 
标 元 素 的 问题 ， 。 大 家 可 以 手动 输入 http:/demo.cssworld.cn/10/2-3.php 
这 个 地 址 杀 自 感受 一 下 。 





transition 隐 藏 除 了 和 transition 友 好 外 ， 与 display:none 相 

5， 其 在 JavaScript 侧 也 更 加 友好 。 存 在 这 样 的 场景 : 我 们 需要 对 隐藏 元 

。 以 便 对 交互 布局 进行 精准 定位 。 此 时 ， 建 议 
使 用 visibility 隐 藏 ; 








.hidden { 
position: absolute; 


visibility: hidden; 
} 











原因 是 ， 我 们 可 以 准确 计算 出 元 素 的 尺寸 和 位 置 ， 如 果 使 用 的 
是 display :none， 则 无 论 是 尺寸 还 是 位 置 都 会 是 9， 计算 就 会 不 准确 。 
例如 ， 假 设 element 是 页 面 上 某 个 display:none 隐 藏 元 素 DOM 对 象 ， 








则 : 


console.log('clientWidth: ”+ element.clientWidth); 
console.log('clientHeight: ”+ element.clientHeight); 


console.log('clientLeft: ' + element.clientLeft); 
console.log('clientTop: ' + element.clientTop); 
console.dir(element.getBoundingClientRect()); 





结果 会 如 图 10-6 显 示 的 那样 全 部 都 是 8。 


clientWidth: 6 
clientHeight: 98 
clientLeft: 9 
clientTop: 9 


Vv ClientRect 


bottom: @ 


上 : ClientRect 


图 10-6 display :none 元 素 尺 寸 和 位 置 计算 值 全 部 都 是 0 





不 仅 如 此 ，transition 隐 藏 在 无 障碍 访问 这 一 块 也 比 
display:none 更 友好 些 。 举 个 例子 ， 对 于 一 个 点 击 遮 量 层 束 隐 茂 
层 的 交互 ， 很 多 人 可 能 是 这 么 实现 的 : 





overlay.onclick = function () { 


this.style.display = 'none'; 
}; 





如 果 不 考虑 无 障碍 访问 ， 这 么 实现 也 算 干 脆 利 落 ， 但 如 果 要 兼顾 无 
障碍 访问 ， em 





ya 
日 





视觉 障 但 用 户 对 页 面 状 态 变 化 部 是 通过 声 首 而 非 视 觉 感 知 ， 因 此 ， 
就 有 必要 告知 准确 的 状态 信息 。 下 面 就 是 诞 章 译 层 的 一 些 描述 ， 显 示 时 


和 隐藏 时 分 别 如 下 : 


<div class="overlay"” role="button" title=" 点击 关闭 浮 层 "></divy> 


<div class="overlay hidden" role="button" title=" 浮 层 已 关闭 "></div> 





以 iPhone 的 VoiceOver 为 例 ， 如 果 .hidden 语 句 是 这 样 的 : 


.hidden { 
visibility: hidden; 
} 








那么 当 我 们 关闭 译 层 时 ，VoiceOver 会 读 “ 浮 层 已 关闭 ”， 很 棒 ， 对 不 
对 ? 但 是 ， 如 果 .hidden 语 句 是 这 样 的 : 

.hidden { 

display: none; 
} 
那么 当 我 们 关闭 浮 层 时 候 ，VoiceOver 会 读 浮 层 下 面 元 素 的 相关 信息 ， 
至 于 .overlay 元 素 是 否 关闭 ， 就 只 能 靠 经验 去 猜测 了 ， 这 显然 就 不 如 
visibility 友 好 。 





上 面 的 案例 我 特意 做 了 一 个 演示 页 面 ， 如 果 读 者 有 屏幕 阅读 软件 ， 
可 以 手动 输入 http:/demo.cssworld.cn/10/2-4.php 或 者 扫 右 侧 的 二 维 码 。 





最 后 ， 有 必要 强调 一 下 可 能 出 现 的 误区 。 





(1) 普通 元 素 的 title 属 性 是 不 会 被 明 读 的 ， 除 非 辅 以 按钮 等 控 
件 元 素 ， 这 里 是 因为 设置 了 role="button" 所 以 才 可 以 朗读 。 


(2) visibility:hidden 元 素 是 不 会 被 朗读 的 ， 注 意 ， 不 会 被 朗 
读 ! 本 案例 之 所 以 会 被 朗读 ， 从 显示 到 隐藏 ， 庶 日 层 focus 的 区 域 还 在 
(display:none 则 丢失 ， 因 为 尺寸 位 置 全 部 变 成 9， ， 你 可 以 理解 为 庶 
单 层 的 “ 遗 散 ”还 在 。 


朗读 结束 后 再 去 触 碰 这 片区 域 的 时 候 ， 是 无 论 如 何 也 找 不 到 已 经 
visibility:hidden 的 这 个 遮 墨 元 素 的 。 


10.2.2 了解 visibility:collapse 


大 家 只 要 了 解 visibility 支 持 的 属性 值 还 有 个 collapse 就 可 以 
了 。 其 他 信息 ， 类 似 原本 其 设计 是 作为 表格 用 的 ， 则 完全 不 用 在 意 ， 
为 对 于 表格 相关 元 素 ， 部 分 现代 浏览 器 对 visibility:collapse 的 解 
析 是 不 准确 的 ， 无 实用 价值 ， 对 于 普通 元 素 ，visibility: collapse 








又 等 同 于 visibility:hidden， 直 接 使 用 visibility:hidden 就 好 
了 ，col1lapse 这 个 单词 又 长 又 难 记 住 ， 没 有 理由 使 用 。 





第 11 章 ”用 户 界 面 样式 


用 户 界 面 样式 指 的 是 CSS 世 界 中 用 来 帮助 用 户 进 行 界面 交互 的 一 些 
CSS 样 式 ， 主 要 有 outline 和 cursor 等 属性 。 


11.1 和 border 形 似 的 outline 属 性 


outline 表 示 元 素 的 轮廓 ， 语 法 和 border 属 性 非常 类 似 ， 分 宽度 、 
类 型 和 颜色 ， 支 持 的 关键 字 和 属性 值 与 border 属 性 一 模 一 样 。 例 如 : 


.Out1line { 
outline: 1ipx solid #066; 
} 


两 者 表现 也 类 似 ， 痢 是 给 元 际 的 外 面 国 框 。 但 是 ， 设 计 的 作用 却 大 
相 径 姓 。 


11.1.1 万 万 不 可 在 全 局 设置 outline:@ none 


outline 是 一 个 和 用 户 体 验 密切 相关 的 属性 ， 与 focus 状 态 以 及 键 
盘 访问 关系 密切 。 





在 桌面 端 网 页 ， 对 于 按钮 或 者 链接 ， 我 们 通常 都 是 使 用 鼠标 点 击 去 
完成 操作 。 但 是 世事 难 料 ， 总 会 存在 用 户 只 能 使 用 键盘 访问 网 站 的 情 
况 。 例 如 ， iMac 鼠标 疫 电 了 ， 或 者 鼠标 二 了， 或 者 在 乔 能 电视 中 访问 
网 站 《〈 遥 控 器 本 质 上 也 是 个 操作 键盘 ) 。 





好 在 所 有 的 浏览 器 原生 就 有 键盘 访问 网 页 的 能 力 ， 对 于 按钮 或 者 链 
接 ， 通 常 的 键盘 操作 是 : Tab 键 按 次 序 不 断 focus 控 件 元 素 ， 包 括 链 
接 、 按 钮 、 输 入 框 等 表单 元 素 ， 或 者 focus 设 置 了 tabindex 的 普通 元 
素 ， 按 Shift+Tab 组 合 键 反 方向 访问 。 








注意 ， 重 点 来 了 ! 在 默认 状态 下 ， 对 处 于 focus 状 态 的 元 素 ， 浏 览 


如 会 通过 虚 框 或 者 外 发 光 的 形式 进行 区 分 和 提示 。 例 如 ， 在 Chrome 浏 
览 右 中 输入 框 focus 时 的 蓝 色 外 框 效果 ， 如 图 11-1 所 示 。 


这 种 虚 框 或 者 外 发 光 效 果 是 非常 有 必要 的 ， 否 则 用 户 根本 就 不 知道 
目 己 当前 聚焦 在 哪个 元 素 上 ， 甚 至 因此 而 迷失 。 








元 素 聚 焦 后 ， 再 按 下 回 车 键 ， 就 相当 于 鼠标 点 击 了 这 个 元 素 ， 从 而 
可 以 前 往 我 们 想 去 的 目的 地 〈 如 <a> 链 接 ) ， 或 者 执行 我 们 想 要 的 交互 
效果 (如 按钮 〉。 





用 户 名 :| 





图 11-1 Chrome 输入 框 focus 时 候 的 蓝 色 外 框 效 果 





以 上 就 是 我 们 的 键盘 访问 过 程 。 可 以 看 出 来 ， 浏 览 右 默认 的 
outline 启 党 标记 是 一 个 非常 有 用 的 行为 。 因 此 ， 类 似 下 面 的 代码 其 实 
征 非 常 不 专业 的 : 








outline: 6 none; 


} 
二 


alt 
outline: 6 none; 


} 





现代 浏览 器 的 focus 体 验 现 在 已 经 做 得 很 好 了 ， 对 于 普通 链接 或 者 
按钮 ， 当 我 们 点 击 的 时 候 ， 已 经 不 会 出 现 outline 效 果 了 ， 只 有 键盘 
Tab 或 者 JavaScript 的 element .focus() 主 动 触 发 才 会 有 发 光 效 果 ， 因 





此 ， 我 实在 想 不 出 为 什么 要 设置 下 面 这 样 的 CSS 代 码 : 


af 
outline: 6 none ; 


} 

对 于 输入 框 元素 ， 我 倒是 可 以 理解 ， 因 为 必须 要 先 focus 才能 输 
入 内 容 ， 一 些 浏览 器 内 置 的 focus 效 果 可 能 和 我 们 的 网 页 设计 格格 不 
入 ， 因 此 需要 重 置 ， 要 使 用 专门 的 类 名 。 例 如 : 





.input { 


outline: 0@; /* outline:none 评 可 */ 





但 是 ， 必 须 把 focus 态 样式 加 上 。 例 如 ， 我 们 可 以 让 输入 框 的 边框 闫 色 


.ijnput:focus { 
border-color: Highlight; 
} 


最 后 再 强调 一 遍 : 万 万 不 可 在 全 局 设置 outline:6 none! 这 样 的 
错误 会 造成 部 分 场景 下 的 部 分 用 户 产 生 使 用 障碍 ! 





国内 很 多 大 站 也 会 犯 类 似 的 错误 ， 注 意 和 干 万 不 要 学 习 ， 干 万 不 要 模 
仿 ! 


在 实际 开发 的 时 候 ， 有 时 候 需 要 让 普通 元 素 有 类 似 控 件 元 素 的 
outline 效 果 。 例 如 ， 基 于 原生 的 单 复 选 框 模拟 单 复 选 框 ， 或 者 为 了 规 
避 submit 类 型 按钮 UI 很 难 完全 保持 一 致 的 问题 ， 我 们 会 使 用 <label> 元 
素来 移花接木 ， 通 过 for 属 性 和 这 些 原生 的 表单 控件 相关 联 。 例 如 : 


<input id="t" type="submit"> 


<label class="btn" for="t"> 提 交 </1label> 





原始 按钮 不 可 见 ，<1abel> 元 素 变 身 按 钮 : 


[type="submit"] { 
position: absolute; 
clip: rect(60 60 0 98); 


} 

.btn { 
display: inline-block; 
padding: 2px 12px; 
background-color: #cd606080; 
color: #fff; 
font-size: 14px; 
cursor: pointer; 





虽然 样式 上 完美 了 ， 但 却 留 下 了 一 个 键盘 可 访问 性 的 问题 : 当 我 们 
使 用 Tab 键 在 页 面 上 遍历 元 素 的 时 候 ，focus 的 是 隐藏 的 原生 提交 按 
钮 ， 而 “代言 人 ”<1abe1> 元 素 无 法 被 focus， 这 就 会 导致 这 样 的 现象 : 
用 户 遍 历 页面 控 件 元 素 一 直 都 很 顺利 ， 突 然 要 到 提交 按钮 的 时 候 ， 页 面 
却 突然 如 死水 一 般 ， 没 有 任何 元 素 有 out1line 高 亮 。 原 因 就 是 被 focus 
的 按钮 元 素 处 于 隐藏 状态 ， 用 户 无 法 看 到 outline 效 果 ， 此 时 我 们 就 需 
要 额外 增加 一 层 CSS 代 码 ， 让 <labe1> 这 个 “代言 人 ” 连 键盘 focus 状 态 
也 一 起 代言 了 ， 也 就 是 说 ， 当 我 们 focus 看 不 见 的 提交 按钮 的 时 候 ， 

让 "代言 人 ”labe1> 元 际 模 拟 原 生 的 focus 避 亮 效果。 

















:focus + label.btn { 
outline: 1px dotted Highlight; 


outline: 5px auto -webkit-focus-ring-color; 





} 


High1ight 是 系统 高 亮色 ， 这 里 用 来 模拟 卫 和 Firefox 浏 览 器 的 


out1line 效 果 相 当 人 合适， 而 下 面 的 5px auto -webkit-focus-ring- 
color 是 在 Chrome 浏 览 器 下 使 用 浏览 器 自 带 的 focus 外 发 光 outline 效 
果 ， 这 里 的 5px 其 实 无 关 紧 要 ， 写 3px 效 果 也 是 一 样 的 。 


最 后 ， 就 有 了 非常 符合 预期 的 近乎 原生 的 focusoutline 效 果 了 ， 
如 图 11-2 和 图 11-3 所 示 。 


用 户 名 : 





图 11-2 Chrome 下 <label> 元 素 outline 效 果 - 发 光 





用 户 名 : | 


图 11-3 IE 下 <label> 元 素 outline 效 果 - 虚 框 











11.1.2 真正 的 不 占据 空间 的 outline 及 其 应 用 


outline 是 本 书 介 绍 到 现在 出 现 的 第 一 个 真正 意义 上 的 不 占据 任何 
空间 的 属性 。 例 如 ， 内 联 元 素 的 上 下 padding 值 似乎 不 占据 任何 空间 ， 
但 是 一 旦 祖先 元 素 overflow 计 算 值 不 是 visible， 同 时 padding 值 足够 
大 ， 深 动 条 就 会 出 现 ， 雄 露出 “不 占据 空间 ”其 实 是 一 个 假象 。 但 
是 out1ine 属 性 确实 不 占据 任何 空间 ， 轮 廓 宽度 设置 得 再 宽广 ， 也 不 会 
影响 任何 元 素 的 任何 布局 ， 并 且 out1line 轮 廓 是 可 穿 透 的 。 考 虑 
到 outline 是 一 个 从 正 8 开 始 束 被 文 持 的 CSS 属 性 ， 这 惑 注 定 了 outline 
要 脱离 其 设计 初衷 ， 在 其 他 方面 大 显 神通 ， 例 如 ， 用 于 实现 一 些 看 似 棘 
手 的 布局 效果 。 





1. 案例 一 : 头像 草 裁 的 和 矩形 铁 空 效果 


有 一 种 图 片 筋 裁 效 果 是 通过 移动 前 景 勇 裁 区 域 实 现 的 ， 如 几 11-4 所 
示 。 移 动 时 的 样式 如 图 11-5 所 示 。 


竟 裁 ( 仅 演 示 移 动 ) 


图 11-4 ”头像 剪裁 的 玺 空 矩形 示意 









著 裁 ( 仅 演 示 移 动 ) 


图 11-5 ”正在 移动 的 头像 剪裁 的 铁 空 窍 形 


这 种 中 间 铁 空 透 明 、 四 周 锭 层 记 章 的 效果 是 如 何 实现 的 呢 ? 





如 果 页 面 没有 滚动 条 ， 倒 是 可 以 试 试 background- 
attachment:fixed 声 明 ， 三 层 结构 ， 底 部 原 图 ， 中 间 氮 单 ， 最 上 面 拖 
上 忠 元 素 ， 拖 忠 元 素 背 景 图 片 就 是 底部 原 图 ， 且 fixed 定 位 ， 于 是 ， 当 我 








们 移动 最 上 层 元 妹 时 候 ， 背 景 图 因为 不 跟随 移动 ， 给 人 感觉 就 是 “ 铂 空 
的 ”。 





但 是 ,“ 页 面 没 有 滚动 条 ”这 个 限定 太 大 了 ， 实 际 项 目 很 难 满足 ， 
此 需要 男 寻 他 法 。 我 曾 多 次 见 到 过 这 种 做 法 ， 即 半 透 明 的 黑色 蒙 层 实际 
上 是 由 很 多 个 矩形 拼 起 来 的 ， 避 开 中 间 区 域 从 而 形成 炙 空 效果 。 这 种 做 
法 比较 符合 现实 认 知 ， 因 此 相对 比较 容易 理解 和 想到 ， 但 是 ， 在 代码 世 
界 里 ， 这 其 实 是 一 种 非常 麻烦 的 做 法 。 








如 果 我 们 把 思维 发 散 ， 克 服 常 态 效 应 和 惯性 思维 ， 就 会 找到 很 多 非 
党 简单 的 其 他 方法 ， 例 如 这 里 要 隆重 出 场 的 outline 属 性 ， 核 心 CSS 代 
人 码 如 下 : 


.Crop { 
overflow: hidden; 


} 


.Crop > .crop-area { 


width: 86px; height: 86pX; 
outline: 256px solid rgba(6,6,0,，.5); 
cursor: move; 


} 





用 一 句 话 概括 就 是 使 用 一 个 大 大 的 outline 来 实现 周围 半 透 明 黑 色 
谈 曾 。 因 为 outline 宽 度 设置 再 大 ， 也 不 会 对 布局 产生 任何 影响 ， 至 于 
超出 的 区 域 ， 通 过 容器 overflow:hidden 隐 藏 就 可 以 了 。 





没 错 ， 原 理 就 是 这 么 简单 。 








当然 ， 实 际 的 代码 还 有 很 多 细节 需要 考虑 ， 如 下 : 


.Crop-area { 
outline: 256px solid #6060; 


outline: 256px solid rgba(6,6,0,，.5); 

background: url(about:blank); 

background: linear-gradient(to top, transparent, transparent); 
filter: alpha(opacity=50); 


cursor: move; 
:root .crop-area { 
filter: none; 


} 





首先 ， 正 8 浏 览 器 不 支持 rgba 颜 色 ， 因 此 这 里 借助 了 透明 度 滤 镜 进 
行 兼容 。 由 于 下 9 浏览 器 同时 支持 两 者 ， 因 此 借助 :root 进 行 了 重 置 ， 其 
次 ， 包 括 下 10 在 内 的 下 浏览 器 下 的 匀 空 元 素 会 有 点 击 罕 咀 的 问题 ， 这 里 
采用 的 方法 是 使 用 background 属 性 设置 看 不 见 的 背景 内 容 ， 于 是 就 有 
了 上 面 的 CSS 代 码 。 








更 完整 的 代码 和 更 切 肤 的 感受 可 以 手动 输入 地 址 
http://demo.cssworld.cn/ 11/1-1.php 进 行 体验 。 


2. 案例 二 : 目 动 填 满 屏幕 剩余 空间 的 应 用 拉 巧 





有 不 少 网 站 的 主 背景 是 白色 的 ， 确 部 是 深 色 的 ， 于 是 就 会 出 现 这 人 么 
个 场景 : 当主 内 容 很 少 的 时 候 ， 包 括 底 部 在 内 都 不 足 一 屏 ， 或 者 用 户 
显示 器 是 竖 屏 ， 则 很 可 能 束 会 出 现 图 11-6 所 示 的 这 样 尴 入 的 情况 。 








Designed & Powered by zhangxinxu 
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图 11-6 高度 不 足 导 致 底 部 下 面 留 白 示 意 











如 何 让 底部 背景 色 正 好 填 满 剩余 屏幕 区 域 呢 ? 目前 我 知道 的 最 好 的 
办 法 就 是 巧 用 outline 属 性 。 假 设 底部 HIML 代 码 是 这 样 的 : 
<div class="footer"> 


<p>Designed &amp; Powered by zhangxinxu</p> 
</div> 





那么 就 有 如 下 CSS 示 意 代码 : 


.footer { 
height: 56pX; 


.footer > pi 
position: absolute; 
left: 6;j right: ©; 


text-align: center; 

padding: 15px 6; 
background-color: #a06b3d6; 
outline: 9999px solid #a6b3d6 ; 
clip: rect(6 9999px 9999px 0); 








最 关键 的 CSS 就 是 设置 一 个 超大 轮廓 范围 的 outline 属 性 。 例 如 ， 
这 里 是 9999px， 作 用 是 保证 无 论 屏幕 多 高 ， 轮 廊 色 块 也 一 定 能 够 履 
盖 。 

但 是 和 border 属 性 不 一 样 ，outline 是 无 法 指定 方位 的 ， 只 能 被 动 
地 四 周 扩展 。 因 此 ，outline:9999px solid #a8b3d6 不 仅 会 填 满 底 
部 方位 的 屏幕 空间 ， 还 会 把 上 面 的 内 容 空 间 也 填 满 。 因 此 ， 我 们 还 需要 
做 进一步 处 理 ， 例 如 ， 提 高 主体 内 容 的 层 著 顺序 ， 但 这 显然 成 本 太 高 ， 
效果 也 不 一 定好 ; 还 有 就 是 采用 这 里 的 clip 前 裁 策 略 ， 让 底部 内 容 元 素 
绝对 定位 ， 同 时 以 上 边缘 和 左边 缘 为 界 进行 裁剪 ， 这 样 ， 就 完全 不 用 担 
心 out1ine 会 覆盖 上 面 的 内 容 啦 ! 代码 组 合 为 : 

















{ 
position: absolute; 
clip: rect(@ 9999px 9999px 0); 





使 用 9999px 这 么 大 的 值 也 是 为 了 确保 100% 填 满 屏幕。 于 是 ， 此 时 
的 效果 就 成 了 如 图 11-7 所 示 的 样子 。 





out iine 与 底 痢 填 满 屏 幕 的 大 而 积 色 块 实例 页 面 


HTML : 《55 ; 


<div cia53=- fooeer > ,osee { 
<p>Designed Sonp; Powered by zhongxtnxu<p> hetghe: Sopx; 
</div> } 
Foorer > 

posttion: obsolute; 
Meft: 0 right: 0; 
text"align: center; 
podding: 15px 0; 
bockground-color; z00b306; 
Outtine: 9999px solid #a00306; 
clip: rect(0® 9999px 99990x 0; 





图 11-7 ”底部 色 块 自动 填 满 屏幕 整 页 示意 





现在 再 也 不 用 担心 屏幕 高 度 太 高 了 ! 


11.2 光标 属性 cursor 


11.2.1 琳 环 满目 的 cursor 属 性 值 


想 想 看 ， 你 平时 做 项 目 时 对 CSS 的 cursor 属 性 的 使 用 ， 是 不 是 就 是 
让 按钮 链接 等 变 为 手 形 ? 类 似 这 样 : 





.button { 
cursor: pointer; 


} 


是 不 是 其 他 属性 值 都 没 怎么 使 用 ? 如 何 真 是 这 样 ， 那 可 真 就 遗憾 
了 ， 因 为 cursor 属 性 要 远 比 你 想 得 丰 富 与 实用 得 多 。 








cursor 属 性 值 几乎 可 以 认为 是 当下 文 持 的 关键 字 属 性 值 最 多 的 CSS 

属性 ， 没 有 之 一 。 下 面 就 是 按照 功能 特性 对 其 进行 的 分 类 以 及 具体 解释 
描述 。 
1. 常规 

。 cursor:auto: cursor 默认 值 。auto 表 示 光 标 形状 根据 内 容 类 别 浏 
唤 器 自动 进行 处 理 。 例 如 ， 输 入 框 里 面 光 标 表 现 为 cursor :text， 
带 href 属 性 的 链接 表现 为 cursor:pointer， 而 原生 的 <button> 
表现 为 cursor:default 等 。 
cursor:default: 系统 默认 光标 形状 。 虽 然 有 “默认 ”之 意 ， 但 却 
不 是 cursor 属 性 的 默认 值 ， 需 要 注意 。 其 大 致 长 这 个 样子 : R。 如 
何 严格 按照 操作 系统 以 及 浏览 器 默认 的 光标 行为 呢 ? 目前 Web 页 面 
中 所 有 按钮 都 使 用 cursor :pointer 手 形 的 做 法 并 不 标准 ， 链 接 才 














是 手 形 ， 按 钮 应 该 都 是 默认 形 ， 通 过 hover 时 候 的 状态 变化 让 用 户 
知道 这 里 是 可 以 点 击 、 可 以 有 交互 的 。 但 是 如 下 一 些 情况 的 存在 ， 
导致 业内 都 习惯 把 所 有 可 点 击 、 可 交互 的 元 素 的 光标 全 部 变 成 手 
形 。 

o 忘记 设置 hover 样 式 或 者 不 方便 设置 ， 例 如 ， 图 标 hover 变 色 
效果 ， 需 要 多 份 不 同色 背景 图 ， 尤 其 现在 都 喜欢 使 用 工具 合 
并 ， 默 认 生成 的 CSS 是 没有 hover 样 式 的 ， 需 要 自己 特殊 处 
理 。 此 时 ， 如 果 这 个 图 标 按钮 及 用 默认 default 光 标 ， 容 易 让 
用 户 党 得 这 里 是 不 可 点 击 的 ， 但 是 使 用 pointer 手 形 光 标 ， 由 
于 光标 变化 本 身 就 是 一 种 hover 状 态 变化 ， 可 以 让 用 户 意 识 到 
这 个 元 素 是 “特别 的 ”。 同 样 地 ， 反 过 来 ， 模 拟 按钮 的 禁用 效果 
的 时 候 ， 也 要 记得 把 cursor:pointer 还 原 
成 cursor :default， 很 多 人 都 不 注意 这 个 细节 。 

由 于 浏览 器 原生 的 按钮 样式 兼容 方面 难以 完美 ， 尤 其 在 下 盛行 
的 年 代 ， 黑 框 、 宽 高 不 一 致 等 一 系列 样式 问题 层 不 出 穷 ， 于 是 
大 家 就 使 用 <a> 标 和 俭 来 模拟 按钮 ， 类 似 这 样 : 








O 〇 





<a href="javascript:" class="button"” role="button"> 按 钮 </a> 


而 浏览 器 中 默认 带 href 属 性 的 ca> 标 签 的 光标 都 是 手 形 ， 而 且 这 个 
手 形 效果 也 人 蛮 好 ， 没 有 必要 再 额外 重 置 为 default 默 认 形 。 于 是 ， 久 而 
久之 ， 大 家 就 约定 俗 成 ， 所 有 链接 和 按钮 都 使 用 手 形 。 以 至 于 发 展 到 现 
在 ， 使 用 原生 的 <button> 按 钮 甚至 下 拉 框 的 时 候 ， 都 要 设置 一 
个 cursor:pointer。 这 种 奇怪 的 发 展 史 真是 比 小 说 还 精彩 。 














。 cursor:none: 声明 非常 有 意思 ， 可 以 让 光标 隐藏 不 见 。 什 





么 情况 下 我 们 不 需要 光标 呢 ? 看 视频 的 时 候 ， 尤 其 全 屏 看 视频 的 时 

候 。 此 时 鼠标 一 直 在 界面 上 晃 着 ， 是 很 碍 眼 、 很 难受 的 。 一 般 可 以 
么 处 理 : 如 果 鼠 标 静 止 3 秒 不 动 ， 就 设置 页 面 或 视频 元 

素 cursor :none 隐 藏 光 标 ， 如 果 有 mousemove 行 为 ， 再 显示 即 可 ! 








然而 这 样 做 有 一 个 小 问题 ， 就 是 下 8 浏览 器 并 不 支持 cursor :none 
声明 ， 从 IE9 浏 览 器 才 开 始 支 持 这 个 属性 ， 怎 么 办 呢 ?” 很 简单 ，IE8 浏 览 
器 使 用 自 定义 的 透明 光标 就 可 以 了 。 弄 一 张 纯 透明 的 PNG 图 片 ， 然 后 制 
作成 cur 格 式 ， 就 可 以 实现 全 部 浏览 器 下 的 光标 隐藏 效果 了 。 








眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/11/2-1.php。 


CSS 代 人 码 如 下 : 


.Cur-none { 
cursor: url(transparent.cur), auto; 


:root .cur-none { 
cursor: none; 


} 





:root 是 IE9 及 以 上 版 本 浏览 器 才 认 识 的 选择 器 ， 因 此 可 以 把 IE8 和 
其 他 浏览 器 区 分 开 。 


2. 链接 和 状态 


。 ee 光标 表现 为 一 只 伸 出 食指 的 手 ， 类 似 这 样 : 
。 了 IE 浏览 器 还 支持 cursor :hand， ee 
的 ， 但 其 他 浏览 器 并 不 识别 ， 因 此 没有 任何 使 用 cursor:hand 的 理 
由 。 我 以 前 其 实 产生 过 疑问 为何“ 手 形 ” 不 统一 是 cursor:hand? 








这 样 通俗 易 懂 又 好 记 。 后 来 算是 明白 了 ，hand 这 个 词 太 概括 和 党 
统 ， 随 着 CSS 发 展 ， 一 定 会 出 现 其 他 与 手 ? 相 关 的 形状 ， 例 如 ， 抓 
取 相 关 的 grab 和 grabbing 等 。 

cursor:help: 帮助 ， 通 常 是 光标 涉 上 带 了 个 问号 ， 类 似 这 样 : 
和 
场景 几乎 都 使 用 cursor:pointer 手 形 ， 实 际 上 ， 可 以 试 试 使 

用 cursor:help， 让 我 们 的 交互 细节 和 视觉 呈现 更 加 细腻 ， 让 用 户 
感受 到 我 们 在 产品 上 的 用 心 。 

cursor:progress: 表示 进行 中 的 意思 。 从 语义 上 讲 ， 其 适 
有 例如 ， 我 们 点 击 一 个 按钮 发 送 请 求 ， 请 求 发 送出 
去 、 返 回 数据 还 没 接收 到 的 这 段 时 间 其 实 就 是 一 个 progress 状 
态 。 按 道理 讲 ， 可 以 让 按钮 的 光标 变 成 cursor:progress， 例 
如 ，Windows 7 系统 下 的 会 有 一 个 不 停 旋 转 的 圈 圈 。 但 是 我 个 人 更 
建议 对 按钮 本 里 的 样子 进行 改变 ， 例 如 ， es 让 用 
re in i 因为 用 户 的 交互 操作 不 一 定 通过 鼠标 ， 
也 有 可 能 通过 键盘 ， 如 果 单 纯 使 用 cursor :progress， 通 过 键盘 
ee ta 用 户 体验 其 实 是 不 好 的 。 


但 是 ， 有 一 个 场景 却 非 常 适合 使 用 cursor:progress， 那 就 是 页 
面 加 载 的 时 候 。 如 今 进 行 Web 开 发 ， 人 而 
JavaScript 加 载 完 毕 是 需要 一 定时 间 的 ， 网 络 不 好 的 时 候 ， 这 个 加 载 时 间 
延迟 可 能 会 非常 明显 ， 于 是 用 户 就 会 遇 到 明明 界面 已 经 呈现 了 ， 但 是 点 
击 “ 展 开 更 多 ”按钮 却 没 有 任何 反应 ， 原 因 就 是 JavaScript 还 没有 完全 加 载 
完毕 。 此 时 就 非常 适合 cursor:progress 出 马 了 ， 我 们 默认 在 <body> 
标签 上 设置 : 








body { 
cursor:progress 


} 


然后 ， 当 JavaScript 初 始 化 完毕 的 时 候 ， 执 行 类 似 下 面 的 JavaScript 
代码 : 


document .body.style.cursor = "auto ; 


于 是 ， 刚 才 的 加 载 场景 就 变 成 了 这 样 : Web 页 面 界面 已 经 呈现 ， 用 
户 想 去 点 击 “ 展 开 更 多 ”按钮 ， 结 果 发 现 此 时 页 面 的 光标 
是 cursor:progress 的 转圈 圈 状 态 ， 此 时 ， 至 少 大 部 分 用 户 会 意识 到 
我 们 的 网 页 还 没有 完全 加 载 完 毕 ， 需 要 再 耐心 等 竺 一会儿， 减少 了 扣 
击 “ 展 开 更 多 ”按钮 却 没 有 任何 反应 的 不 安 和 焦虑 感 ， 对 用 户 更 加 友好 
Te 








。 cursor:wait: 我 们 先 看 看 光标 形状 ， 可 能 是 这样 的 转圈 轿 ， 或 
者 是 沙漏 或 者 是 表 ， 总 之 和 电脑 死机 时 候 的 光标 是 一 样 的。 因此 ， 
请 不 要 在 Web 开 发 的 时 候 使 用 cursor :wait 光 标 ， 以 免 引 起 用 户 不 
必要 的 恐慌 。 就 算 真 的 不 响应 了 ， 浏 览 器 自己 也 会 处 理 ， 我 们 无 须 
多 此 一 举 。 

。 cursor:context-menu: cursor:context-menu 兼容 性 比较 复杂 ， 
Mac OS X 和 Linux 系 统 下 的 Chrome 和 Firefox 浏 览 器 是 支持 的 ， 但 是 
Windows 系 统 下 的 Chrome 和 Firefox 浏 览 器 却 不 支持 。 











在 Windows 7 系统 下 ， 表 现 为 箭头 光标 右 下 方 挂 了 个 汽油 桶 sa。 





context-menu 的 字面 意思 是 “上 和 下文 菜 单 ”， 就 是 右键 点 击 我 们 的 


桌面 或 者 网 页 显示 的 那个 菜单 列表 。 如 果 套 用 这 个 语 

义 ，cursor:context- menu 适 用 的 场景 是 自 定 义 “ 上 下 文 菜单 ”的 时 
候 ， 例 如 ， 网 盘 列 表 或 者 邮箱 列表 ， 我 们 可 以 直接 右键 删除 ， 如 图 11-8 
所 示 。 


今天 ( 工 封 
局 5 深入 
3 R ms » Es 
昨天 (1 封 ) 新 窗口 打开 
加 5 
形 附 
星期 三 (3 封 ) 这 旺 垃 圾 由 伯 





图 11-8 邮箱 列表 右键 自 定 义 上 下 文 沫 单 示 意 














此 时 ， 如 果 我 们 把 光标 设置 为 cursor:context-menu， 用 户 束 更 
容易 意识 到 这 里 有 上 自 定 义 的 、 快 捷 方 便 的 上 下 文 菜单 功能 ， 而 不 是 傻 傻 
间 望 用 户 上 自己 发 现 。 

3. 选择 
。 cursor:text: 潜台词 是 文字 可 被 选中 ， 形 状 类 似 I。 默 认 文 本 字 
符 或 者 可 输入 的 单 复 选 框 的 光标 就 表现 成 这 样 ， 因 为 文字 可 以 被 选 
中 ; 反 过 来 ， 如 果 文 字 是 不 能 被 选中 的 ， 光 标 就 不 应 该 


是 cursor :text。 
举 个 例子 ， 单 行 输入 框 ， 默 认 光 标 表 现 为 cursor :text， 但 是 我 们 


一 旦 让 其 disabled 禁 用 ， 如 <input disabled>， 则 浏览 器 自动 会 把 光 
标 改 变 成 cursor:default， 如 图 11-9 所 示 。 





R 





图 11-9 ”输入 框 禁 用 时 的 光标 示意 





同样 地 ， 如 果 我 们 使 用 CSS 让 页 面 上 的 文本 字符 不 能 被 选中 ， 则 光 
标 也 要 跟着 一 起 发 生变 化 ，CSS 代 码 如 下 : 


article { 
-webkit-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; 
user-select: none; 


cursor: default; 


} 





user-select:none 声 明 可 以 让 现代 浏览 器 下 的 文本 不 能 被 选中 ， 
这 个 很 多 人 都 知道 ， 但 是 这 些 人 却 没 注意 到 要 设置 cursor:default， 
因为 设置 了 user-select:none 的 文本 其 光标 依然 表现 
为 cursor:text， 显 然 语义 和 表现 就 不 符合 了 ， 明 明 旦 现 的 是 可 选中 文 
本 的 光标 ， 结 果 文 本 却 选 不 了 。 因 此 不 要 忘记 顺便 加 


个 cursor:default。 





。 cursor:vertical-text: 潜台词 是 文字 可 以 垂直 选中 ， 形 状 类 
似 一 。 当 我 们 使 用 writing-mode 把 文字 排版 从 水 平 改 为 垂直 的 时 
修 ， 文 字 的 光标 就 上 自动 表现 为 cursor:vertical-text。 换 句 话 
说 ，cursor:vertical-text 就 是 给 垂直 文字 排 板 用 的 ， 平 常 的 项 
目 开 发 很 难 有 机 会 用 到 。 

。 cursor:crosshair: 十 字 光 标 ， 形 状 类 似 +。 它 通常 用 在 像素 级 
的 框 选 或 点 选 场合 ， 比 方 说 自 定义 的 取 色 工具 ， 如 图 11-10 所 示 。 

。 cursor:cell: cursor:cell 中 的 cell 和 display:table-cell 中 的 
cel1 其 实 可 以 看 成 是 同一 个 东西 ， 也 就 是 单元 格 。 换 句 话 





说 ，cursor:cel1 用 来 表示 单元 格 是 可 以 框 选 的 ， 形 状 类 似 忠 。 有 
没有 觉得 很 眼熟 ? 没 错 ， 此 光标 为 Excel“ 御 用 ”光标 ， 如 图 11-11 所 
站 
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图 11-10 ” 取 色 工具 使 用 十 字 光 标点 选 颜色 示意 
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图 11-11 ” Excel 中 的 cursor:cell 光 标 








这 下 大 家 应 该 就 知道 cursor:cell 适 合 在 哪 种 场景 下 使 用 了 吧 ! 


原生 的 IE8 浏 览 器 并 不 支持 cursor:cell， 寿 使 用 ，IE8 需 要 上 自 定 
3 
4. 拖 电 








。 cursor:move: 光标 变 成 cursor :move， 人 往往 就 意味 着 当前 元 素 
是 可 以 移动 的 ， 形 状 类 似 倍 。 例 如 ， 头 像 剪裁 的 时 候 可 能 需要 拖 动 
剪裁 框 或 背景 图 ， 就 可 以 设置 cursor :move， 或 者 有 些 弹 框 组 件 按 
住 标题 栏 是 可 以 拖 昌 的 ， 我 们 就 可 以 在 标题 栏 上 设 
置 cursor:move， 让 用 户 很 直观 地 知道 当前 弹 框 是 可 拖 忠 的 ， 降 低 





用 户 的 学 习 成 本 ， 还 是 很 有 使 用 价值 的 。 

cursor:copy: 光标 变 成 cursor:copy， 往 往 就 意味 着 当前 元 系 
是 可 以 被 复制 的 ， 形 状 类 似 *。 原 生 的 下 8 浏览 器 并 不 文 持 ， 硝 使 
用 ，IE8 需 要 自 定义 。 

cursor:alias: 光标 变 成 cursor:alias， 人 
是 可 以 创建 别名 或 者 快捷 方式 的 ， 形 状 类 似 x。 原 生 的 下 8 浏览 器 
不 文 持 ， 帮 使 用 ，IE8 需 要 自 定 义 。 

cursor:no-drop: ”光标 变 成 cursor:no-drop， 往 往 就 意味 着 当 
前 元 素 放 开 到 当前 位 置 是 不 允许 的 。 如 有 果 深 究 其 光标 表现 ， 应 该 类 
似 如 图 11-12 所 示 这 般 。 但 实际 上 ， 浏 览 絮 的 真实 表现 是 和 
cursor:not-allowed 一 模 一 样 的 。 

cursor:not-allowed: 光标 变 成 cursor:not-allowed， 人 往往 就 
意味 着 当前 行为 是 禁止 的 ， 形 状 类 似 S。 有 一 些 人 会 给 禁用 态 按钮 
设置 cursor:not-allowed， 其 本 身 出 发 点 是 好 的 ， 表 示 当 前 按钮 
禁止 访问 (不 允许 点 击 ) ， 似 乎 也 说 得 通 ， 但 其 实 是 不 合适 的 ， 
为 cursor:not-allowed 并 不 是 利 规 光标 状态 ， 而 是 与 拖 电 行为 相 
关 的 ， 它 应 该 是 一 种 主动 行为 下 的 光标 表现 。 例 如 ，Chrome 浏 览 
器 下 ， 我 们 在 网 页 上 拖 忠 一 张 图 片 ， 其 光标 表现 如 图 11-13 所 示 。 
因此 ， 禁 用 按钮 光标 还 是 使 用 cursor: default 更 合适 ， 然 后 通 
过 样式 变化 让 用 户 一 眼 就 看 得 出 来 现在 按钮 是 不 可 点 击 的 。 
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图 11-12 ”系统 白带 的 drop 无 效 光标 示意 





图 11-13 ” Chrome 浏览 器 下 图 片 拖 忠 无 效 时 的 光标 表现 


5. 深 动 
。cursor:all-scroll: 表示 上 下 左右 都 可 以 滚动 ， 但 有 一 个 很 糟 


糕 的 问题 : Windows 系 统 下 光标 表现 和 cursor:move 一 样 。 再 考虑 
到 本 身 作 用 场景 局 上限， 我 觉得 可 以 忽略 此 声明 。 


6. 拉 伸 


。 cursor:col-resize: 光标 形状 类 似 d*。 它 适用 于 移动 牌 直线 
条 ， 如 垂直 参考 线 。 如 果 要 通过 移动 改变 左右 分 栏 的 宽度 ， 建 议 使 
用 cursor:ew-resize。 

。 cursor:row-resize: 光标 形状 类 似 #。 它 适用 于 移动 水 乎 线条 ， 
如 水 平 参考 线 。 如 果 要 通过 移动 改变 上 下 分 栏 的 高 度 ， 建 议 使 


用 cursor:ns-resize。 


(1) 单 向 拉 伸 : 总 共 8 个 方位 8 个 不 同 的 关键 字 属 性 值 ， 名 称 和 近 
似 形状 如 下 。 


。 cursor:n-resize， 理 应 是 一 个 朝 上 的 单 第 尖 ， 但 通常 是 双 同 的 
表现 ?。 


。 cursor:e-resize， 理 应 是 一 个 绷 右 的 单 箭 头 ， 但 通 滑 是 双 回 的 


表现 一 。 

。 cursor:s-resize， 理 应 是 一 个 旨 下 的 单 箭 头 ， 但 通常 是 双 辐 的 
表现 1 

。 cursor:w-resize， 理 应 是 一 个 旨 左 的 单 箭 头 ， 但 通常 是 双 辐 的 
表现 ~。 

。 cursor:ne-resize， 理 应 是 一 个 旨 右 上 角 的 单 稍 头 ， 但 通常 是 双 
问 的 表现 x。 

。 cursor:nw-resize， 理 应 是 一 个 朝 左 上 角 的 单 第 涉 ， 但 通常 是 双 
向 的 表现 *。 

。 cursor:se-resize， 理 应 是 一 个 朝 右 下 角 的 单 第 涉 ， 但 通常 是 双 
向 的 表现 *。 

。 cursor:sw-resize， 理 应 是 一 个 绷 左 下 角 的 单 稍 头 ， 但 通常 是 双 
向 的 表现 =。 
(2) 双向 拉 伸 : 总 共 4 个 对 立方 位 组 合 ， 名 称 和 近似 形状 如 下 。 





e CuUursor:ew-resize: 4 。 
e cursor:ns-resize: 1 。 
e cursor:nesw-resize: 


e cursor:nwse-resize: 


双 回 拉 伸 的 4 个 属性 值 从 IE10 才 开始 支持 。 考 虑 到 单 向 拉 伸 往 往 会 
目 动 以 双向 的 形式 呈现 ， 因 此 ， 实 际 开发 的 时 候 ， 我 们 大 可 这 么 处 理 ， 
拿 右 下 角 拉 伸 示 意 : 


.resize { 


CuUrsor. se-resize; 
CuUrsor. nwse-resize; 


} 





这 样 ， 即 使 有 些 环境 单 向 拉 伸 就 只 有 一 个 方向 的 第 头 ， 有 后 面 的 
cursor:nwse-resize 音 着， 也 不 会 出 现 什么 明显 的 样式 问题 。 


7. 缩放 
。 cursor:zoom-in: 光标 形似 放大 镜 &。 
。 cursor:zoom-out: 光标 形似 缩小 镜 &。 
这 古 CSS3 新 文 持 的 两 个 光标 类 型 。 
8. 抓 取 


。 cursor:grab: 光标 是 一 个 五 指 张 开 的 手 妇 。 
。 cursor:grabbing: 光标 是 一 个 五 指 收 起 的 手 @。 


这 也 是 CSS3 新 支持 的 两 个 光标 类 型 。 


或 许 是 因为 操作 系统 并 不 存在 这 样 的 光标 类 型 ， 不 同 浏 览 右 下 这 
个 “五 指 张 开 / 收 起 的 手 * 的 形状 还 是 有 些 差 异 的 ， 而 其 他 比较 传统 的 光标 
则 完全 一 致 ， 并 且 都 和 操作 系统 的 光标 一 模 一 样 。 


最 后 ， 再 总 结 一 下 琳琅 满目 的 cursor 属 性 值 的 兼容 性 情况 〈 数 据 


源 自 caniuse.com ) 。 


。 可 以 放心 使 用 ， 无 须 担 心 兼容 性 问题 的 cursor 属 性 值 有 auto、 
crosshair、 default、 move、text、wait、help、n-resize、 


e-resize、s-resize、w-resize、ne-resize、nw-resize、 


se-resize、sw-resize、pointer、progress、not-allowed、 
no-drop、vertical-text、all-scroll、col-resize 和 row- 
resize,。 

从 IE9 浏 览 器 才 开 始 支 持 的 属性 值 有 none、alias、cell、copy、 


ew-resize、ns-resize、nesw-resize、nwse-resize 和 


context-menu。 

。 从 Edge12 才 开始 支持 的 属性 值 有 zoom-in 和 zoon-out。 

。 从 Edge14 才 开始 支持 的 属性 值 有 grab 和 grabbing( 源 自 MDN 文 
档 ) 。 


11.2.2” 自 定义 光标 


从 IE6 开 始 ， 我 们 就 可 以 自 定义 网 页 中 的 光标 样式 ， 因 此 ， 对 于 
cursor 属 性 ， 兼 容 性 都 不 是 问题 。 例 如 ，IE8 不 支持 上 面 提 到 的 
cursor:none， 就 是 通过 自 定义 手段 实现 兼容 的 : 


.Cur-none { 
cursor: url(transparent.cur); 
} 


对 于 Chrome 等 浏览 器， 可 以 直接 使 用 PNG 图 片 作 为 光标 ， 但 是 IE 浏 
览 器 不 行 。 正 仅 文 持 专门 的 .cur 格 式 的 光标 文件 ， 需 要 使 用 工具 进行 格 
式 转换 ， 至 于 什么 工具 ， 大 家 可 以 上 自行 搜索 一 下 ， 还 是 有 很 多 的 。 

















解决 兼容 性 问题 只 是 自 定义 光标 的 作用 之 一 ， 自 定义 光标 最 大 的 作 
用 其 实 是 根据 业务 需要 对 光标 进行 更 为 彻底 的 自 定 义 ， 最 常见 的 就 是 点 
击 图 片 左右 半 区 ， 分 别 实现 上 一 张 、 下 一 张 图 片 切 换 预 览 的 效果 ， 如 图 
11-14 所 示 。 











图 11-14 自 定 义 光 标 在 图 片 预 响 交互 中 的 应 用 示意 





自 定 义 光 标 很 实用 ， 但 要 讲解 的 知识 点 不 多 ， 就 不 过 多 展开 了 。 


第 12 章 ” 流 癌 的 改变 





在 现实 世界 中 ， 太 阳 总 是 东升 西 落 ， 水 总 是 从 高 往 低 流 ， 这 似乎 就 
征 永 恒 不 变 的 规律 。 人 在 理解 抽象 知识 的 时 候 习 惯 与 现实 世界 相映 射 ， 
于 是 会 有 人 认为 CSS 世 界 中 的 内 容 自 左 往 右 、 自 上 而 下 排列 也 是 永恒 不 
变 的。 实际 上 ，CSS 世 界 流 癌 古 可 以 轻易 进行 颠 履 和 改变 的 。 








12.1 ”改变 水 平流 问 的 direction 


至 少 在 我 接触 的 这 么 多 项 目 里 ， 没 有 见 到 有 谁 使 用 过 CSS 的 
direction 属 性 。 


为 什么 呢 ? 是 因为 direction 长 得 丑 吗 ? 虽然 说 direction 确 实 其 
貌 不 扬 ， 但 是 CSS 世 界 不 会 有 这 样 的 歧视 。 





那 是 因为 兼容 性 吗 ? 更 不 是 了 ，direction 早 在 IE6 时 代 就 已 经 被 
文 持 了 ， 其 兼容 性 见 表 12-1。 


兼 








表 12-1 direction 属 性 


Eee 








任意 版 本 任意 版 本 





那 完 竟 是 什么 原因 呢 ? 


我 认为 多 半 是 因为 宣传 不 够 。 要 是 所 有 前 端 人 能 够 人 手 一 本 这 本 
书 ， 目 然 就 不 会 有 这 样 的 问题 了 ， 因 为 本 书 热衷 于 挖掘 CSS 属 性 的 湾 
力 ， 可 以 让 那些 默默 无 闻 但 有 能 力 的 CSS 属 性 烧烤 生 辉 、 焕 发 青 
春 。direction 束 是 一 个 典型 ， 该 属性 简单 且 好 记 ， 属 性 值 少 ， 兼 容 性 
好 ， 关 键 时 候 省 心 省 力 。 


12.1.1 direction 简 介 





基本 上 ， 大 家 只 要 关心 下 面 这 两 个 属性 值 就 好 了 : 





direction: ltr; // ! 


direction: rt]l; 








其 中 ，1lLtr 是 初始 值 ， 表 示 left-to-right， 就 是 从 左 往 右 的 意思 。 目 前 东 
亚 以 及 欧美 文字 书写 就 是 从 左 往 右 的 ; rt1 表 示 right-to-left， 就 是 从 右 
往 左 的 意思 。 阿 拉 伯 语 〈Arabic) 、 和 希 伯 来 语 (Hebrew) 等 的 书写 就 是 
从 右 往 左 的 ， 也 就 是 说 ，direction 设 计 的 本 意 其 实 是 为 了 兼顾 这 类 语 


百 。 














但 是 ，Web 开 发 接触 多 语言 的 场景 其 实 非常 有 限 ， 但 这 其 实 并 不 妨 
但 direction 属 性 在 实际 项 目 中 的 应 用 ， 因 为 direction 改 变 水 平流 回 
的 特性 在 网 页 布局 的 时 候 非 常 有 用 。 











direction 属 性 默认 有 这 么 一 个 特性 ， 即 可 以 改变 蔡 换 元 素 或 
者 inline-block/ inline-table 元 素 的 水 平 呈 现 顺序 。 举 个 例子 ， 
使 用 如 下 HTML: 


<p dir="Prt1l”"> 
<img src="1.jpg" alt=" 美 女 "> 


<img src="2.jpg" alt=" 美 景 "> 
</p> 





美女 图 片 DOM 市 点 在 美景 图 片 的 前 面 ， 如 果 我 们 忽略 父 级 元 素 ， 是 不 
是 页 面 呈 现 的 时 候 应 该 美女 图 片 在 前 面 ， 美 景 图 片 在 后 面 ? 但 是 这 里 呈 
现 的 顺序 却 是 反 的 ， 美 景 图 片 显 示 在 了 美女 图 片 的 前 面 ， 如 图 12-1 所 
未。 








眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/12/1-1.php 或 者 扫 下 面 


的 二 维 码 。 





图 12-1 direction:rt1 下 的 图 片 呈 现 顺 序 


这 种 特性 表现 对 我 们 实际 开发 有 什么 作用 呢 ? 作 用 就 是 我 们 可 以 兵 
不 血 刃 地 改变 元 素 的 水 平 呈 现 顺序 。 举 个 例子 ， 我 们 要 写 一 款 confirm 
确认 框 组 件 ， 需 要 同时 兼容 加 面 疾 和 移动 端 。 在 果 面 端 呈 现 的 时 
候 , “确认 ”按钮 是 在 左边 ,“ 取 消 ” 按 钮 是 在 右边 ， 如 图 12-2 所 示 。 如 果 
移动 端 访 问 ， 为 了 我 们 手指 点 击 方便 ， 产 品 经 理 希 望 “ 人 确认 ”按钮 在 右 
边 ， 而 “取消 ”按钮 在 左边 ， 如 图 12-3 所 示 。 














图 12-2 桌面 端 





图 12-3 ”移动 端 


请 问 : 如 果 你 来 实现 ， 你 会 如 何 处 理 这 种 不 同 设备 、 不 同 按 钮 顺序 
的 问题 呢 ? 


如 果 按 钮 右 对 齐 ， 我 们 还 可 以 使 用 浮动 float :right 来 解决 ， 但 是 
现在 的 关键 问题 是 按钮 是 牛 中 对 齐 的 ， 别 说 浮动 了 ， 飞 动 都 满足 不 了 需 
求 。 一 番 思 考 后 ， 你 发 现 没什么 思路 ， 是 不 是 又 会 去 求助 万 能 的 
JavaScript， 根 据 设备 改变 按钮 元 系 在 DOM 尝 中 的 顺序 了 ? 








别 瞎 折 腾 啦 ! 有 请 名 不 见 经 传 的 direction 属 性 出 场 ! 直接 一 
行 direction:rtl， 十 几 个 字母 ， 按 钮 顺序 就 会 自动 反 转 ， 兼 容 性 好 ， 
代码 又 少 ， 我 敢 打包 票 ， 这 一 定 是 性 价 比 最 高 的 方法 ! 


@media screen and (max-width: 486px) { 
.dialog-footer { direction: rtl; } 
} 





当然 ，direction 属 性 的 作用 远 不 止 这 些 。 通 常 ， 我 们 让 单行 文字 
溢出 用 点 显示 ， 这 个 点 通常 都 是 在 右边 的 ， 省 略 的 都 是 最 后 的 文字 ， 配 
合 direction 属 性 ， 我 们 可 以 让 这 个 点 打 在 开头 ， 让 前 面 的 文字 省 略 ， 
CSS 和 HTML 代 码 如 下 : 


一 一 





.ell { 


width: 248px; 
white-space: nowrap; 
text-overflow: ellipsis; 
overflow: hidden; 
} 





<p class="el1" dir="ltr"> 开 头 是 我 ， 这 是 
<p class="ell" dir="rt1"> 开 头 是 我 ， 这 























中 间 ， 然 后 就 是 结束 </p> 
是 中 间 ， 然 后 就 是 结 











EE 结束 </p> 
HTML 代 码 中 的 dir 属 性 和 CSS 中 direction 属 性 作用 一 样 ， 使 用 
HTML 属性 是 为 了 方便 测试 。 效 果 如 网 12-4 所 示 。 眼 见 为 实 ， 手 动 输入 
http://demo.cssworld.cn/12/1-2.php 或 者 扫 下 面 的 二 维 码 。 





.… 我 ， 这 是 中 间 ， 然 后 就 是 结束 








图 12-4 不 同 direction 属 性 值 下 的 文字 溢出 打点 效果 
比方 说 ， 我 们 的 动态 文 





这 种 开头 打点 的 效果 在 有 些 场 合 非 常 有 用 。 





字 后 面 跟 了 一 些 标记 性 的 图 标 ， 如 果 后 面 打点 ， 束 很 容易 把 这 些 需要 呈 
并 借助 max- 





现 的 图 标 一 并 变 成 点 ， 于 是 我 们 不 得 不 给 文字 套 一 层 标签 


width 来 只 让 文字 打点 ， 那 可 是 相当 麻烦 的 。 但 有 了 direction 属 性 ， 
有 了 前 置 打 点 ， 事 情 就 简单 多 了 ， 只 要 配合 text-align:1left 控 制 


下 ， 就 完全 不 用 担心 后 面 的 标记 性 的 图 标 会 被 隐 藏 挥 啦 ! 


还 可 以 轻松 改变 表格 中 列 的 呈现 顺序 。 例 如 ， 我 们 
原本 








direction 属 性 
对 表 12-1 设 置 一 个 direction:rt1， 就 会 变 成 表 12-2 所 示 的 这 样 ， 


第 一 列 的 Chrome 跑 到 最 后 了 。 


兼 容 ， 





性 值 后 的 CSS direction 属 








表 12-2 ”改变 了 direction 属 


EE 


directionL:rtl 还 可 以 让 text-justify 两 端 对 齐 元 素 ， 最 后 一 
行 落 单 的 元 素 右 对 齐 显示 。 例 如 ， 使 用 下 面 的 CSS 和 HTMEL: 

















pl 
text-align: justify; 


direction: rtl]; 


} 


<p> 


<img src="1.jpg"> 

<img src="1.jpg"> 

<img src="1.jpg"> 
</p> 








结果 如 图 12-5 所 示 。 眼 见 为 实 ， 手 动 输入 
http://demo.cssworld.cn/12/1-3.php 或 者 扫 下 面 的 二 维 码 。 





图 12-5 direction:rt1 时 text-justify 最 后 一 行 右 对 齐 


只 要 是 内 联 元 素 ， 只 要 与 书写 流 相 关 ， 都 可 以 试 试 direction 属 
性 。 


对 了 ， 还 有 一 个 小 点 值得 一 提 。 在 不 文 持 text-align:start/end 


的 浏览 器 中 (如 IE)〉 ， 不 同 的 direction 属 性 值 会 改变 text-align 属 
性 的 初始 值 : 当 direction 值 为 tr 的 时 候 ，text-align 的 初始 值 
是 left; 当 direction 值 为 rt1 的 时 候 ，text-align 的 初始 值 


是 right。 
12.1.2 direction 的 黄金 搭档 unicode-bidi 


细心 的 读者 可 能 注意 到 了 ， direction 属 性 似乎 只 能 改变 图 片 或 者 
按钮 的 呈现 顺序 ， 但 对 纯 字 符 内 容 (尤其 中 文 ) 好 像 并 没有 什么 效果 ， 
但 实际 上 ， 我 们 也 是 可 以 指定 中 文 每 个 字符 都 反 向 呈现 的 ， 方 法 就 是 借 
助 direction 的 搭档 属性 unicode-bidi。 





单 看 unicode-bidi 的 名 称 ， 你 可 能 会 觉得 有 点 儿 怪 ， 会 觉得 它 可 
能 是 哪个 浏览 器 私有 的 属性 ， 实 际 上 不 是 的 ，unicode-bidi 是 一 个 所 
有 浏览 器 都 支持 的 良好 的 CSS 属 性 。 至 于 它 为 什么 会 有 这 么 奇怪 的 名 
称 ， 我 这 里 解释 一 下 ， 你 可 以 把 unicode 理 解 为 “字符 集 ”， 而 bidi 则 是 
单词 bidirectionality 的 简写 ， 中 文 意思 是 “ 双 同 性 ?”。 网 页 中 的 字符 
很 多 时 候 是 混合 的 ， 例 如 中 文 和 英文 夹杂 ， 或 者 阿拉 伯 文 和 贡 文 夹杂 ， 
此 时 就 会 出 现 文本 阅读 方向 不 一 样 的 情况 ， 阿 拉 伯 文 是 从 右 往 左 谈 ， 英 
文 是 从 左 往 在， 而 这 种 混合 方向 同时 出 现 的 现象 就 称 为 " 双 辐 性 ”， 
此 unicode-bidi 作 用 就 是 明确 字符 出 现 “ 双 同性 ”时 应 当 有 的 表现 。 




















unicode-bidi 兼 容 性 比较 好 的 几 个 属性 值 如 下 : 


unicode-bidi: normal; // 默认 值 


unicode-bidi: embed; 
unicode-bidi: bidi-override; 





现 有 的 对 unicode-bidi 这 几 个 属性 值 的 解释 几乎 都 是 星 深 难 懂 
的 ， 我 在 这 里 给 出 一 个 通俗 易 懂 的 解释 。 

(1) normal: 正常 排列 。 假 设 设置 了 direction:rtl， 则 图 片 、 
按钮 以 及 问号 、 加 号 之 类 的 字符 会 从 右 往 左 显示 ， 但 是 中 文 、 英 文字 符 
还 是 从 左 往 右 显示 。 








(2) embed: embed 属 性 值 要 想起 作用 ， 只 能 作用 在 内 联 元 素 上 。 

在 通常 情况 下 ，embed 属 性 值 的 表现 和 normal 是 一 样 的 ， 导 致 很 多 人 不 
明日 embed 到 底 和 normal 有 什么 区 别 。 其 实 它们 的 区 别 很 简单 ，embed 
属性 值 的 字符 排序 是 独立 内 磐 的 ， 不 受 外 部 影响 。 我 们 来 看 一 个 例子 ， 
CSS 和 HTML 如 下 : 

.Ptl { 

direction: rt1; 

unicode-bidi: bidi-override; 


} 
.rtl > span { 


background-color: #ddd; 


} 
<p class="rt1"> 开 头 是 我 ，<span style="unicode-bidi:normal;"> 这 是 中 间 </span> 
， 然 后 是 结束 </p> 
<p class="rt1"> 开 头 是 我 ，<span style="unicode-bidi:embed;"> 这 是 中 间 </span>， 
然后 是 结束 </p> 




















结果 如 图 12-6 所 示 。 


unicode -bidi:normal 


束 结 是 后 然 ， 间 中 是 这 ， 我 是 头 开 
束 结 是 后 然 ， 这 是 中 间 ， 我 是 头 开 


>, 


unicode et 





图 12-6 unicode-bidi:embed 和 unicode-bidi:norma1l 对 比 





因为 <p> 元 素 设 置 了 unicode-bidi:bidi-override， 所 以 会 强制 
所 有 字符 按照 direction 设 置 的 方 同 全 部 反问 排列 。 但 是 从 图 12-6 可 以 
看 出 ， 设 置 了 unicode- bidi:normal 的 <span> 元 素 直 接受 外 部 的 
unicode-bidi 属 性 影响 ， 也 全 部 反 向 呈现 了 ， 但 是 下 一 行 设置 了 
unicode-bidi:embed 的 “这 是 中 间 ” 四 个 字 反 而 是 “normal” 排 序 。 





原因 就 在 于 ，unicode-bidi:embed 会 开启 一 个 看 不 见 的 租 入 层 ， 
然后 自己 在 里 面 重 新 排序 ， 但 unicode-bidi:normal 并 不 会 开启 一 个 
额外 的 散 入 层 ， 于 是 总 是 受 外 部 的 unicode-bidi 影 响 。 








这 一 对 比 效果 有 对 应 的 实例 页 面 ， 有 兴趣 的 读者 可 手动 输入 
http://demo. cssworld.cn/12/1-4.php 或 者 扫 右 侧 的 二 维 码 。 











embed 属 性 值 的 作用 原理 是 在 元 素 的 开始 和 结束 位 置 插 入 特殊 字符 
加 以 实现 的 ， 可 以 理解 为 在 元 素 开始 位 置 添加 了 一 个 Ut+262A 字 符 〈 如 
果 direction 值 是 ltr) 或 者 U+262B 字 符 (如 果 direction 值 





是 rtl1) ， 并 在 该 元 系 结束 位 置 添 加 了 一 个 U+262C 字 符 。 


因此 ， 实 际 上 我 们 无 须 设置 unicode-bidi:embed， 直 接 在 <span> 
元 素 前 后 分 别 插入 U+282B 字 符 和 U+282C 字 符 也 可 以 实现 类 似 的 效果 。 
具体 如 下 : 











<p class="rt1l"> 开 头 是 我 ，<span>&#x262B ;这 是 中 间 &#x262C;</span>， 然 后 是 











本 人 杀 测 有 效 。 





(3) bidi-override: 顾名思义 ，bidi-override 就 是 “ 重 写 双 
同 排 序 规则 *， 通 常 样式 表现 为 所 有 的 字符 都 按照 统一 的 direction 顺 
序 排列 ， 例 如 ， 若 设置 direction:rtl， 则 所 有 字符 都 会 从 右 往 左 反 向 
排列 ， 效 果 强 烈 。 


bidi-override 的 作用 原理 也 是 通过 插入 特殊 字符 实现 的 ， 可 以 理 
解 为 在 元 素 开 始 位 置 或 者 每 个 匿名 子 级 块 盒 的 开始 位 置 〈 如 果 有 的 话 ) 
添加 一 个 U+262D 字 符 〈 如 果 direction 值 是 Itr) 或 者 U+282E 字 符 ( 如 
末 direction 值 是 rt1) ， 并 在 该 元 素 结束 位 置 添加 了 一 个 U+282C 字 
符 。 








因此 ， 实 际 上 我 们 无 须 设置 unicode-bidi:bidi-override 以 及 
direction 属 性 ， 直 接 在 元 素 前 后 分 别 插入 U+262E 字 符 和 U+262C 字 符 
(可 缺 省 也 可 以 实现 字符 反 同 排列 效果 。 例 如 : 





<p>&#X262E; 一 二 三 四 五 六 七 八 九 十 </p> 





最 后 页 面 呈 现 的 文字 就 是 “十 九 八 七 六 五 四 三 二 一 ”， 还 是 挺 有 巧 思 的 。 


规范 文档 中 有 这 么 一 句 话 很 有 意思 : Unicode 算 法 对 内 入 有 61 层 的 
限制 ， 应 该 注意 尽量 不 要 使 用 值 不 为 normal 的 unicode-bidi， 除 非 适 
当 ( 也 就 是 在 元 素 影 响 有 限 的 前 提 下 )。 











unicode-bidi 属 性 虽然 很 有 意思 ， 但 是 改变 字符 的 呈现 顺序 往往 
ee 因此 ， 其 出 场 机 会 实际 上 要 比 direction 
低 一 些 ， 但 存在 即 有 价值 ， 总 会 有 场合 非常 适合 使 用 unicode-bidi 属 
ME 





12.2 ”改变 CSS 世 界 纵横 规则 的 writing-mode 





writing-mode 这 个 CSS 必 性， 是 不 是 很 少见 到 、 很 少 用 到 ? 就 像 
我 们 将 不 常见 的 文字 称 为 “生僻 字 ” 一 样 ， 我 们 可 以 把 不 常见 的 CSS 属 性 
叫 作 “生僻 属性 ”。writing-mode 给 我 们 的 感觉 就 是 一 个 “生僻 属 
性 ”一 一 很 弱 ， 可 有 可 无 。 





但 是 实际 上 ， 我 们 都 错 了 ， 大 错 特 错 ! writing-mode 可 以 说 是 
CSS 世 界 里 面 最 强大 的 CSS 属 性 了 ， 它 是 本 书 最 后 出 场 的 大 咖 ， 直 接 颠 
履 CSS 世 界 的 众多 规则 。 





writing-mode 之 所 以 给 人 “生僻 ?的 感觉 ， 是 有 原因 的 。 实 际 
上 writing-mode 这 个 CSS 属 性 很 早 承 诞 生 了 ， 正 5.5 浏 览 句 就 已 经 文 持 
TT 


那 就 奇怪 了 ! writing-mode 既 然 这 么 厉害 ， 出 现 的 时 间 早 、 资 格 
老 ， 为 什么 一 直 沉 条 了 差不多 20 年 呢 ? 





那 是 因为 在 很 长 一 段 时 间 里 ，Firefox、Chrome 这 些 现代 浏览 器 都 不 
支持 writing-mode，writing-mode 基 本 上 就 是 正 浏 览 器 的 私有 产物 。 
很 多 人 对 下 一直 没什么 好 感 ， 对 吧 ?” 由 此 及 彼 ， 自 然 对 writing-mode 
也 不 待 见 。 


然而 ， 束 在 我 们 被 流行 前 端 技术 一 叶 蔽 目的 时 候 ， 各 大 现代 浏览 器 
纷纷 对 writing-mode 实 现 了 更 加 标准 的 支持 (主要 得 益 于 Firefox 浏 览 
器 的 积极 跟 进 ) 。 也 就 是 说 ， 不 知 从 什么 时 候 起 ，writing-mode 的 兼 





容 性 已 经 不 成 问题 了 ， 加 上 该 属性 本 身 特 性 强大 一 一 我 仿佛 看 到 了 一 颗 
冉冉 升 起 的 新 星 一 一 不 对 ， 是 大 放 光 辉 的 圆 月 ! 





12.2.1 writing-mode 原 本 的 作用 


和 float 属 性 有 些 类 似 ，writing-mode 原 本 是 为 控制 内 联 元 素 的 
显示 而 设计 的 ( 即 所 谓 的 文本 布局 ) 。 因 为 在 亚洲 ， 尤 其 像 中国 这 样 的 
东亚 国家 ， 存 在 文字 的 排版 不 是 水 平 而 是 垂直 的 情况 ， 如 中 国 的 古诗 
文 ， 如 图 12-7 所 示 。 











对 尾 定妆 喇 加 | | 
- 压 章 玖 于 消 册 认 
。 纵队 蜗 才 巾 浪 可 
- 囊 营 | 妨 半 册 巾 


图 12-7 ”古诗 竖 版 示意 





因此 ，writing-mode 就 是 用 来 实现 文字 竖 问 呈现 的 。 
1. writing-mode 的 语法 


writing-mode 的 语法 学 习 要 求 比 其 他 CSS 属 性 要 高 一 些 ， 因 为 我 
们 需要 记 住 两 套 不 同 的 语法 : 一 个 是 了 正 私 有 属性 ， 一 个 是 CSS3 规 范 属 
性 。 











先 看 一 下 未 来 所 需 的 CSS3 语 法 : 





/* 关键 字 值 */ 

writing-mode: horizontal-tb; /* 默认 值 */ 
writing-mode: vertical-rl; 

writing-mode: vertical-1r; 


/* 全 局 值 一 关键 字 inherit，IE8 及 以 上 版 本 浏览 器 文 持 ，initial 和 unset，IE13 才 支持 





*/ 

writing-mode: inherit; 
writing-mode: initial; 
writing-mode: unset; 





我 们 通过 名 称 束 能 知道 各 个 关键 字 属 性 值 大 概 的 意思 。 例 如 ， 默 认 
值 horizontal-tb 表 示 文 本 流 是 水 平方 向 〈horizontal) 的 ， 元 素 是 从 上 
往 下 (top-bottom) 堆 县 的 。 





vertical-r1 表 示 文 本 是 垂直 方向 〈vertical) 展示 ， 然 后 阅读 的 顺 
序 是 从 右 往 左 (right-left〉 ， 和 我 们 阅读 古诗 的 顺序 一 致 。 








vertical-1Lr 表 示 文 本 是 垂直 方向 〈vertical) 展示 ， 然 后 阅读 的 顺 
序 还 是 默认 的 从 左 往 右 (left-right〉 ， 即 仅仅 是 水 平 变 垂直 。 


图 12-8 给 出 了 各 个 值 下 的 中 英文 表现 的 对 照 (参考 自 MDN) [1 


水 平 特性 | 混合 特性 
文本 文本 


我 家 没有 电 |Example ”|1994 年 化 
h tai-tb 


vertical-ir > 
vertical-rl 


图 12-8 writing-mode 和 文本 展示 效果 示意 








下 面 来 看 一 下 老 I 下 浏览 器 的 语法 ， 由 于 历史 原因 ， 其 显得 相当 复 
杂 ， 正 官方 文档 显示 如 下 : 


-ms-writing-mode: lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr | lr-bt | 


rl-bt | 1r 
| rl | tb 





根据 我 的 测试 〈 非 原生 下 8、IE9) ，-ms- 私 有 前 绥 是 可 省 略 的 ， 直 


接 用 writing-mode 所 有 下 浏览 器 都 是 文 持 的 。 


正 浏览 器 下 的 关键 字 值 多 达 11 个 。 





lr-tb: IE7 及 以 上 版 本 浏览 器 文 持 。 初 始 值 。 内 容 从 左 往 右 、 从 上 
往 下 水 平流 动 ， 并 且 下 一 行 水 平 元 系 在 上 一 行 元 素 的 下 面 ， 所 有 符 
号 都 是 直立 定位 。 大 部 分 书写 系统 都 使 用 这 种 布局 。 

rl-tb: IE7 及 以 上 版 本 浏览 器 支持 。 内 容 从 右 往 左 、 从 上 人 往 下 水 平 
流动 ， 并 且 下 一 行 水 平 元 素 在 上 一 行 元 素 的 下 面 ， 所 有 符号 都 是 直 
立定 位 。 这 种 布局 适合 从 右 往 左 书 写 的 语言 ， 如 阿拉 伯 语 、 希 伯 来 
语 、 塔 安 那 文 和 和 哲 利 亚 语 。 

tb-rl: IE7 及 以 上 版 本 浏览 器 文 持 。 内 容 从 上 往 下 、 从 右 往 左 垂 
直流 动 ， 下 一 个 垂直 行 定位 于 前 一 个 垂直 行 的 左边 ， 全 角 符号 直立 
定位 ， 非 全 角 符 号 《〈 也 可 以 称 作 符 拉 了 丁 文 或 者 罕 假 名 符号 ) 顺 时 针 
方向 旋转 90"。 这 种 布局 多 见于 东亚 文字 排版 。 

bt-rl: 正 7 及 以 上 版 本 浏览 器 文 持 。 内 容 从 下 往 上 、 从 右 往 左 垂直 
流动 ， 下 一 个 垂直 行 定位 于 前 一 个 垂直 行 的 左边 ， 全 角 符 号 直立 定 
位 ， 非 全 角 符 号 《也 可 以 被 称 作 罕 拉 丁 文 或 者 罕 假 名 符号 ) 顺 时 针 
方向 旋转 90"。 此 布局 多 见于 东亚 垂直 排版 从 右 往 左 的 文本 块 上 。 
tb-lr: IE8 及 以 上 版 本 浏览 器 文 持 。 内 容 从 上 往 下 、 从 左 往 右 垂 直 
流动 。 下 一 个 垂直 行 在 前 一 个 的 右边 。 

bt-lr: 正 8 及 以 上 版 本 浏览 器 文 持 。 内 容 从 下 往 上 、 从 左 往 右 垂 直 



































流动 。 

。1r-bt: IE8 及 以 上 版 本 浏览 占 支 持 。 内 容 从 下 往 上 、 从 左 往 右 水 平 
流动 。 下 一 个 水 平行 在 前 一 行 的 上 面 。 

。rl-bt: IE8 及 以 上 版 本 浏览 器 支持 。 内 容 从 下 往 上 、 从 石 往 左 水 平 


流动 。 
。1lr: IE9 及 以 上 版 本 浏览 器 支持 。 在 SYVG 和 HTML 元 素 上 使 用 。 等 
同 于 lr-tb。 


。rl: IE9 及 以 上 版 本 浏览 器 支持 。 在 SVG 和 HTML 元 素 上 使 用 。 等 
同 于 rl1-tb。 

。 tb: IE9 及 以 上 版 本 浏览 器 支持 。 在 SVG 和 HTML 元 素 上 使 用 。 等 
同 于 tb-rl。 


各 个 属性 值 的 表现 如 图 12-9 所 示 “参考 微软 官网 ) 。 


DD 


Now 1s the time for all good men to 
come to the atd of theitr country. 


D1 六 


Now is the time for all good men to 
.Come to the aid of their country 


DY USUI 


一 
= 
已 
a 
ty 
站 


come to the aid of their country. 
Now is the time for al good men to 


.Come to the aid of their country 
Now i the time for all good men to 


D] U: 











图 12-9” 王 浏览 器 下 writing-mode 各 个 属性 值 表 现 


补充 说 明 如 下 。 


。 相同 的 writing-mode 属 性 值 并 不 会 累加 。 例 如 ， 如 果 父 子 元 素 均 
设置 了 writing- mode:tb-rl， 只 会 演 染 一 次 ， 子 元 素 并 不 会 两 
次 “旋转 ”。 

在 EE 浏览 器 下 ， 如 果 一 个 自 喘 具有 布局 的 元 素 〈 不 是 纯 文本 之 类 元 
素 ) writing-mode 属 性 值 和 父 元 素 不 同 ， 那 么 当 子 元 素 的 布局 流 
变化 的 时 候 ， 其 父 元 素 坐 标 系 统 的 可 用 空间 会 被 充分 利用 。 这 段 文 
字 太 过 术语 化 ， 我 解释 一 下 就 是 : 在 下 浏览 器 下 ， 当 布局 元 素 从 水 
平 变 成 垂直 的 时 候 《〈 举 个 例子 ) ， 你 就 想象 为 元 素 在 垂直 方 回 
是 166% 自 适应 父 元 素 高 度 的 。 因 此 ， 正 浏览 器 下 〈 不 包括 Edge 13 
及 以 上 版 本 ) ， 元 素 vertical 流 的 时 候 你 会 发 现 高 度 高 得 吓人 ， 
布局 和 其 他 现代 浏览 器 不 一 样 ， 正 是 这 个 原因 。 

虽然 Chrome 和 Opera 认 识 tb-r1 等 老 的 了 正 属 性 值 ， 但 也 仅仅 是 认识 
而 已 ， 并 没有 任何 实际 效果 ! 




















2. 需要 关注 的 writing-mode 属 性 值 


从 直接 开发 的 角度 而 言 ， 虽 然 正 文 持 多 达 11 个 私有 的 属性 值 ， 但 是 
我 们 需要 关注 的 也 就 那么 几 个 。 完 竟 是 哪 几 个 呢 ? 


如 果 你 的 项 目 需要 兼容 下 7， 则 只 要 关注 两 个 就 可 以 了 ， 即 初始 
值 ]r-tb 和 tb-rl， 对 应 于 CSS3 规 范 中 的 horizontal-tb 和 vertical- 
rl1。 


如 果 你 的 项 目 只 需要 兼容 IE8 及 以 上 版 本 浏览 妖 ， 茶 喜 你 ， 你 可 以 
和 CSS3 规 范 属 性 完全 对 应 上 了 ， 而 且 IE8 下 的 writing-mode 要 比 IE7 强 
大 得 多 。 我 们 需要 关注 初始 值 Ir-tb、tb-r1 和 tb-1lr， 分 别 对 应 于 
CSS3 中 的 horizontal-tb、vertical-F1 和 vertical-1lr。 























看 上 去 复杂 的 属性 是 不 是 变 得 很 简单 了 ? 重新 整理 出 一 个 实战 版 : 


writing-mode: lr-tb | tb-rl | tb-lr (IE8+) ; 





writing-mode: horizontal-tb | vertical-rl | vertical-lr; 





对 ， 大 家 只 要 记 住 上 面 这 几 个 就 可 以 了 ! 因为 所 谓 的 垂直 排版 ， 实 
际 Web 开 发 是 很 少 遇 到 的 。 





有 人 可 能 要 有 疑问 了 : 既然 writing-mode 实 现 的 文本 垂直 排版 场 
景 有 限 ， 那 么 还 有 什么 学 习 的 意义 呢 ? 





前 面 也 提 到 了 ， 虽 然 创 造 writing-mode 的 本 意 是 文本 布局 ， 但 
是 ， 其 带 来 的 文档 流 同 的 改变 ， 不 仅 改 变 了 我 们 多 年 来 正常 的 CSS 认 
知 ， 同 时 可 以 巧妙 地 实现 很 多 意 想 不 到 的 需求 和 效果 。 





12.2.2 Writing-mode 不 经 意 改 变 了 哪些 规则 


writing-mode 将 页 面 默认 的 水 平流 改 成 了 垂直 流 ， 题 覆 了 我 们 以 
往 的 很 多 认 知 ， 基 于 原本 水 平方 同 才 适用 的 规则 全 部 都 可 以 在 垂直 方 问 
适用 ! 下 面 所 有 案例 均 使 用 如 下 CSS 代 码 : 


.Verticle-mode { 
writing-mode: tb-rl; 


-webkit-writing-mode: vertical-rl; 
writing-mode: vertical-rl; 


} 





1. 水 平方 同 也 能 margin 合 并 


在 CSS2 的 规范 文档 中 有 这 么 一 句 话 : “The bottom margin of an in- 


flow block-level element always collapses with the top margin of its next in- 





flow block-level sibling, unless that sibling has clearance.” 其 清 清楚 楚 地 和 写 


着 bottom margin 和 top margin 会 合并 。 然 而 ， 这 是 CSS2 文 档 中 的 描 
述 ， 在 CSS3 中 ， 由 于 writing-mode 的 存在 ， 这 种 说 法 就 不 严谨 了 ， 而 
应 该 是 对 垂直 流 方 同 的 margin 值 会 砾 生 合 并 。 换 句 话 说， 如 果 元 又 是 
默认 的 水 平流 ， 则 垂直 margin 会 合并 ;如 采 元 素 是 垂直 流 ， 则 水 


平 margin 会 合 # 








眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/12/2-1.php 或 者 扫 下 面 
的 二 维 码 。 结 果 如 图 12-10 所 示 。 





默认 流 -垂直 margin 合 并 


margin:20px; 
margin:20px; 


垂直 流 -水 平 margin 合 并 





图 12-10 writing-mode 下 水 平 margin 合 并 
2. 普通 块 元 素 可 以 使 用 margin:auto 实 现 垂 直 居 中 


我 们 应 该 知道 ， 默 认 的 Web 流 中 ，margin 设 置 auto 值 的 时 候 ， 只 
有 水 平方 向 才 会 居中 ， 因 为 默认 width 是 166% 自 适应 的 ，auto 才 有 计算 
值 可 依 ， 而 在 垂直 方向 ，height 没 有 任何 设置 的 时 候 高 度 绝 不 会 自动 
和 父 级 高 度 一 致 ， 因 此 auto 没 有 计算 空间 ， 于 是 无 法 实现 垂直 居中 。 但 
是 ， 在 writing-mode 的 世界 里 ， 纵 横 规 则 已 经 改变 ， 元 素 的 行为 表现 
发 生 了 翻天 履 地 的 变化 。 





(1) 图 片 元 素 。 


我 们 先 来 看 一 下 ， 图 片 元 素 margin:auto 实 现 垂 直 居 中 ， 手 动 输入 
http://demo.cssworld.cn/12/2-2.php 或 者 扫 右 侧 的 二 维 码 。 其 中 图 片 的 CSS 
代码 如 下 : 


img { 
display: block; 
margin-top: auto; margin-bottom: auto; 


} 








Firefox 浏 览 器 中 的 效果 如 图 12-11 所 示 。 但 是 ， 丰 IE 浏览 器 下 ， 却 
没有 垂直 居中 ， 如 图 12-12 所 示 。 





图 12-11 writing-mode 下 图 片 垂直 居中 效果 〈Firefox 浏 览 器 ) 





如 管理 器 


图 12-12 writing-mode 下 图 片 并 未 垂直 居中 “(IE 浏览 器 ) 





奇怪 ? ! 难道 正 不 文 持 垂直 流下 的 垂直 居中 ? 非 也 ， 根 据 我 的 测 
试 ， 是 图 片 这 类 蔡 换 元 素 貌 似 不 行 ， 普 通 的 block 元 素 都 是 可 以 的 。 

(2) 普通 块 状元 素 。 

手动 输入 http://demo.cssworld.cn/12/2-3.php 或 者 扫 下 面 的 二 维 码 。 


此 时 ， 不 仅 IE11 Edge， 甚 至 IE8 浏 览 器 ， 都 垂直 居中 了 ， 如 图 12-13 上 所 
示 。 








源 管理 器 





图 12-13 writing-mode 下 块 元 素 垂 直 拓 中 1 (IE 浏览 器 ) 
3. 可 以 使 用 text-align:center 实 现 图 片 垂 直 居 中 
前 面 提 过 ，margin:auto 无 法 实现 正 浏 览 器 下 的 图 片 垂 直 居 中 ， 如 
果 非 要 让 图 片 垂直 居中 ， 可 以 使 用 text-align:center， 手 动 输入 


http://demo.cssworld.cn/12/2-4.php 或 者 扫 下 面 的 二 维 码 。 结 果 ， 之 前 病 
恢 恢 的 下 浏览 器 活 了， 如 图 12-14 所 示 。 








理 器 一 | 调试 程序 守 CO”8 


图 12-14 writing-mode 下 块 元 素 垂 直 拓 中 2 (IE 浏览 器 ) 





4. 可 以 使 用 text-indent 实 现 文字 下 沉 效果 





这 是 个 真实 项 目的 例子 ， 要 增加 一 个 按钮 按 下 文字 下 沉 的 效果 。 如 
果 你 来 实现 ， 你 会 怎么 做 呢 ? 行 高 控制 ? 但 默认 文本 就 不 居中 (对 于 高 
度 自 适 应 的 按钮 ，line-height 下 沉 是 为 了 避免 按钮 高 度 变 化 ， 默 认 
是 不 能 完全 居中 的 ) 。padding+height 能 精确 控制 ， 又 略 烦 。 然 而 ， 
在 writing-mode 垂 直流 下 ， 我 们 又 有 了 新 思路 ， 例 如 ， 直 接 使 
用 text-indent 实 现 垂直 方向 的 控制 ， 没 想到 吧 ! 无 须 关 心 height 高 
度 、padding 间 距 大 小 ， 任 何 按钮 都 可 以 通用 ， 因 为 text-indent 不 会 
影响 元 素 原 本 的 盒 布 局 。 





感 兴趣 的 读者 可 以 手动 输入 http://demo.cssworld.cn/12/2-5.php 或 者 
扫 右 侧 的 二 维 码 。 





核心 CSS 和 HTMEL 代 码 如 下 : 
.btn { 


} 
.btn:active { 
text-indent: 2px; 


} 


.Verticle-mode { 
writing-mode: tb-rl; 
writing-mode: vertical-rl; 

} 


<a href="javascript:" class="btn verticle-mode"> 领 </a> 











此 时 ， 点 击 这 个 按钮 的 时 候 ， 文 字 束 会 往 下 一 沉 ， 非 常 有 按 下 去 的 
感觉 ， 如 图 12-15 所 示 。 


u 


蒜 喜 你 中 了 88 元 红包 ! 


图 12-15 writing-mode 下 text-indent 实 现 文字 下 沉 效 果 





为 什么 有 如 此 效果 呢 ? 这 要 归功 于 中 文 。 在 垂直 流 排版 的 时 候 ， 中 
文 不 会 旋转 ， 还 是 直立 的 。 也 就 是 说 ， 虽 然 肉 眼看 上 去 文字 没什么 变 
化 ， 但 是 布局 流 已 经 发 生 了 变化 ， 以 前 类 似 text-indent/letter- 
spacing 等 水 平 控制 属性 都 作用 在 垂直 方向 了 。 











当然 ， 这 个 例子 比较 巧 的 是 按钮 文字 只 有 一 个 ， 要 是 按钮 文字 有 多 
个 ， 怕 是 就 没 这 么 轻松 和 绝妙 了 。 


5. 可 以 实现 全 兼容 的 icon fonts 图 标的 旋转 效果 


在 老 的 正 浏 览 右 下 ， 我 们 要 实现 小 图 标的 旋转 效果 是 很 嘛 烦 的 ， 
为 要 使 用 下 的 旋转 或 翻转 滤 镜 什么 的 。 


有 了 writing-mode， 在 有 些 场景 下 ， 我 们 吏 不 用 这 么 麻烦 了 。 


前 面 你 可 能 也 注意 到 了 ， 当 writing-mode 把 文档 变 成 垂直 流 的 时 
修 ， 我 们 的 瑞 文 和 数字 符号 是 会 “ 喘 着 ”显示 的 ， 也 就 是 天 然 90° 旋 转 
了 。 此 时 ， 我 们 不 妨 脑 洞 大 开 一 下 : 假如 我 们 使 用 icon fonts 技 术 让 这 些 
字符 直接 映射 某 个 小 图 标 ， 那 则 不 是 轻 轻 松 松 承 可 以 实现 小 图 标 旋转 
了 ? 关键 在 于 ， 就 算是 IE6 和 IE7 浏 览 器 对 其 也 是 支持 的 ， 这 要 比 滤 镜 什 
么 的 简单 多 了 ! 











眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/12/2-6.php 或 者 扫 右 侧 
的 二 维 码 。 





核心 CSS 和 HTML 代 码 如 下 : 


@font-face { 
font-family: Arrow; 
src: url("/fonts/12/arrow.eot?"); 
src: local("Any"), 
url("/fonts/12/arrow.woff"); 
} 
.icon-play { 
font-family: Arrow; 


} 


.Verticle-mode { 
writing-mode: tb-rl; 
writing-mode: vertical-rl; 
} 
<span class="icon-play">r</span> 箭头 朝 右 
<span class="icon-play verticle-mode">r</span> 箭头 朝 下 





结果 如 图 12-16 所 示 。 


默认 流 
> 箭头 朝 右 
垂直 流 
Y 第 头 朝 下 











图 12-16 writing-mode 下 兼容 的 字体 图 标 旋转 效果 





可 以 看 到 ， 虽 然 IE8 不 支持 transform， 但 是 旋转 轻松 达成 。 











6. 充分 利用 高 度 的 高 度 自 适 应 布局 





当 文 档 变 成 垂直 流 的 时 候 ，height 高 度 天 然 自 适应 ， 于 是 ， 我 们 
可 以 充分 利用 高 度 的 高 度 目 适 应 布局 ,…… 突 然 发 现 ， 可 以 列举 的 案例 实 
在 太 多 了 ， 这 样 下 去 ， 本 书 没 法 完结 了 ， 所 以 往 下 的 案例 都 从 略 了 吧 。 








总 之 ， 理 论 上 讲 ， 有 了 writing-mode， 我 们 能 够 做 的 事情 比 以 前 
多 了 很 多 。 就 介 想 不 到 ， 不 怕 做 不 到 。 





12.2.3 writing-mode 和 direction 的 关系 


writing-mode、direction 和 unicode-bidi 是 CSS 世 界 中 三 大 可 
以 改变 文本 布局 流向 的 属性 ， 其 中 direction 和 unicode-bidi 属 于 近 
杀 ， 经 常 一 起 使 用 ， 也 是 仅 有 的 两 个 不 受 CSS3 的 al1 属 性 影响 的 CSS 属 
性 ， 基 本 上 就 是 和 内 联 元 素 一 起 使 用 。 它 貌似 是 为 阿拉 伯 文 字 设 计 的 。 











乍 一 看 ，writing-mode 似 乎 包含 了 direction 和 unicode-bidi 的 
某 些 功 能 和 行为 ， 例 如 ，vertical-rl 的 rl1 和 direction 的 rtl 值 有 相 
似 之 处 ， 都 是 从 石 往 左 。 然 而 ， 实 际 上 两 者 是 没有 交集 的 。 
为 vertical-Prl 此 时 的 文档 流 为 垂直 方向 ，Prl1 表 示 水 平方 向 ， 此 时 再 设 
置 direction:rtl， 实 际 上 值 rt1 改 变 的 是 垂直 方 同 的 内 联 元 素 的 文本 
方向 ， 一 横 一 纵 ， 没 有 交集 。 而 且 writing-mode 可 以 对 块 状 元 素 产 生 
影响 ， 直 接 改变 了 CSS 世 界 的 纵横 规则 ， 要 比 direction 强 大 得 多 。 它 
貌似 是 为 东亚 文字 设计 的 。 





然而 ，CSS 的 奇妙 之 处 就 在 于 : 某 些 特性 当初 可 能 就 是 为 茶 些 图 文 
排版 设计 的 ， 但 是 我 们 可 以 利用 它 带 来 的 特性 发 挥 自己 的 创造 力 ， 实 现 
其 他 很 多 意 想 不 到 的 效果 。 因 此 ， 上 面 出 现 的 “三 剑客 ”都 是 非常 好 的 资 


另外 ，CSS 逻 辑 属性 (也 就 是 -start/-end 属 性 ) 的 出 现 其 实 与 现 
代 浏 览 费 加 强 了 对 流 的 文 持 有 天， 包括 老 江 湖 direction， 以 及 最 近 跟 


进 的 writing-mode。 


本 书 正文 部 分 到 此 为 止 ， 感谢 阅读 ! 


[1] 大 家 会 发 现 瑞 文字 符 横 过 来 了 ， 可 以 试 试 使 用 text- 
orientation:upright 让 其 直立 ，IE 不 支持 ，Firefox 和 和 Chrome 支持 。 


欢迎 来 到 异步 社区 ! 


异步 社区 的 来 历 


异步 社区 (www.epubit.com.cn) 是 人 民 邮 电 出 版 社 旗 下 IT 专 业 图 书 旗 
舰 社 区 ， 于 2015 年 8 月 上 线 运营 。 


异步 社区 依托 于 人 民 邮 电 出 版 社 20 余 年 的 开 专 业 优 质 出 版 资源 和 编 
辑 策 划 团 队 ， 打 造 传统 出 版 与 电子 出 版 和 目 出 版 结合 、 纸 质 书 与 电子 书 
结合 、 传 统 印 刷 与 POD 按 需 印 刷 结合 的 出 版 平 合 ， 提 供 最 新 技术 资讯 ， 
为 作者 和 读者 打造 交流 互动 的 平台 。 
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全 新 改版 ， 新 新 面 散 迎接 2017! 为 答谢 社区 用 广 
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python 机 器 学 习 一 一 预 。 册 叶 斯 方法 : 元 灾 沪 程 。 机 器 学 习 项 上 自 开发 安吉 。。” 贝 时 斯 轩 堆 : 婉 计 妾 楼 E 
油分 析 校 心算 法 与 由 时 斯 推断 的 python 学 习 法 近期 活动 





仁 区 里 秀 和 有 有 什么 ? 
购买 图 书 


我 们 出 版 的 图 书 涵盖 主流 IT 技 术 ， 在 编程 语言 、Web 搁 术 、 数 据 科 
学 等 领域 有 众多 经 典 畅销 图 书 。 社 区 现 已 上 线 图 书 1000 余 种 ， 电 子 书 
400 多 种 ， 部 分 新 书 实 现 纸 书 、 电 子 书 同步 出 版 。 我 们 还 会 定期 发 布 新 
书 书 讯 。 
下 载 资源 

社区 内 提供 随 书 附 赠 的 资源 ， 如 书 中 的 案例 或 程序 源 代码 。 





另外 ， 社 区 还 提供 了 大 量 的 免费 电子 书 ， 只 要 注册 成 为 社区 用 户 就 
可 以 免费 下 载 。 


与 作 译 者 互动 


很 多 图 书 的 作 译 者 已 经 入 驻 社区 ， 您 可 以 关注 他 们 ， 咨 询 技 术 问 
题 ， 可 以 阅读 不 断 更 新 的 技术 文章 ， 听 作 译 者 和 编辑 畅 聊 好 书 背 后 有 趣 
的 故事 ;， 还 可 以 参与 社区 的 作者 访谈 栏目 ， 疝 您 天 注 的 作者 提出 末 访 题 
目 。 








灵活 优惠 的 购书 


您 可 以 方便 地 下 单 购买 纸 质 图 书 或 电子 图 书 ， 纸 质 图 书 直 接 从 人 民 
邮电 出 版 社 书 库 发 贷 ， 电 子 书 提供 多 种 阅读 格式 。 


对 于 重 磅 新 书 ， 社 区 提供 预 售 和 新 书 首发 服务 ， 用 户 可 以 第 一 时 间 
买 到 心仪 的 新 书 。 


用 户 帐 户 中 的 积分 可 以 用 于 购书 优惠 。100 积 分 =1 元 ， 购 买 图 书 
时 ， 在 RE 本 里 填 入 可 使 用 的 积分 数值 ， 即 可 扣 减 相应 金额 。 


| Eda 














购买 本 电子 书 的 读者 专 享 异步 社区 优惠 券 。 使 用 方法 : 注册 成 为 社区 用 户 ， 在 下 单 购 书 
时 输入 “57AWG”， 然 后 点 击 “ 使 用 优惠 码 ”"， 即 可 享受 电子 书 8 折 优 惠 (本 优惠 券 只 可 使 用 一 
次 ) 。 

















纸 电 图 书 组 合 购买 


社区 独家 提供 纸 质 图 书 和 电子 书 组 合 购买 方式 ， 价 格 优惠 ， 一 次 购 
买 ， 多 种 阅读 选择 。 





Wireshark 网 络 分 析 的 艺术 PN 


作者 ; 林 洱 这 
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提交 勘误 
您 可 以 在 图 书页 面 下 方 提交 勘误 ， 每 条 勘误 被 确认 后 可 以 获得 100 
积分 。 热 心 勘误 的 读者 还 有 机 会 参与 书稿 的 审 校 和 翻译 工作 。 
写作 


社区 提供 基于 Markdown 的 写作 环境 ， 喜 欢 写作 的 您 可 以 在 此 一 试 
身手 ， 在 社区 里 分 享 您 的 技术 心得 和 读书 体会 ， 更 可 以 体验 上 自 出 版 的 乐 
趣 ， 轻 松 实现 出 版 的 梦想 。 











如 果 成 为 社区 认证 作 译 者 ， 还 可 以 享受 异步 社区 提供 的 作者 专 至 特 
色 服 务 。 


会 议 活 动 早 知 道 


您 可 以 掌握 1T 圈 的 技术 会 议 资讯 ， 更 有 机 会 免费 获 赠 大 会 门票 。 


加 入 二 消 


扫描 任意 二 维 码 都 能 找到 我 们 : 








异步 社区 





微 信 订 阅 号 




















QQ 群 : 436746675 


社区 网 址 : www.epubit.com.cn 
官方 微 信 : 异步 社区 
官方 微 博 : @ 人 邮 异 步 社区 ，@ 人 民 邮 电 出 版 社 -信息 技术 分 社 


投稿 用 咨询 : contact@epubit.com.cn 


